Vue進階(幺貳幺):表單校驗注意事項

表單檢驗

在這裏插入圖片描述
注:prop對應的不單單是rules規則裏面的驗證項,同時對應着我們form-item下的v-model的值。prop綁定的類要與el-form-item下的v-model的值相對應。否則就算校驗元素輸入字符,也會提示“請輸入”之類的提示語,造成校驗不友好問題。
在這裏插入圖片描述

清除表單校驗

// 清除表單校驗的提示
if (this.$refs['XXX']) {
 // 延時執行
  this.$nextTick(function () {
    this.$refs['XXX'].clearValidate();
  })
};

callback()

vue表單自定義表單校驗,不管檢驗是否通過一定要加 callback();

validateDatasourceNm(rule, value, callback) {
	let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/; //只允許輸入正數
	if (value === '') {
		callback();  //這句話沒有的話 會不知名的問題產生。
	} else {
		if (!reg.test(value)) {
			callback(new Error(this.ruleNames[rule.fullField]));
		}
		callback();
	}
}

延伸閱讀:
Vue進階(幺幺叄):關於vue.js element ui 表單驗證 this.$refs[formName].validate()的問題

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章