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

最新推荐文章于 2024-08-17 17:56:24 发布

No Silver Bullet

最新推荐文章于 2024-08-17 17:56:24 发布

阅读量2.7k

点赞数 3

分类专栏： # Vue2 文章标签： vue 表单校验

本文链接：https://blog.csdn.net/sunhuaqiang1/article/details/106431017

版权

Vue2 专栏收录该内容

204 篇文章 848 订阅

订阅专栏

文章目录

一、表单检验

在这里插入图片描述
注：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();
	}
}