Vue进阶（幺贰幺）：表单校验注意事项

表单检验

注：prop对应的不单单是rules规则里面的验证项，同时对应着我们form-item下的v-model的值。prop绑定的类要与el-form-item下的v-model的值相对应。否则就算校验元素输入字符，也会提示“请输入”之类的提示语，造成校验不友好问题。

清除表单校验

// 清除表单校验的提示
if (this.$refs['XXX']) {
　// 延时执行
  this.$nextTick(function () { this.$refs['XXX'].clearValidate();
  })
};

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

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();
	}
}

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

延伸阅读：

• 《 Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/106431017