解决element的表单校验输入框有值但校验未通过的问题

在项目中使用vue+element的:rules=“规则数组” 进行表单验证时,明明给表单赋值了但是验证还是报错，显示输入框不能为空，经过查证找到原因特此记录一番。解决方案：1.在保证文中其他规则都正确的情况下，看看你的rules里面的trigger是不是"change"，如果是的话改成其它的。2.在回显赋值的时候，将表单的第一次校验清除掉。type: [{ required: true, tri

笔墨り轻狂

2773人浏览 · 2020-11-19 14:18:05

笔墨り轻狂 · 2020-11-19 14:18:05 发布

在项目中使用vue+element的:rules=“规则数组” 进行表单验证时,明明给表单赋值了但是验证还是报错，显示输入框不能为空，经过查证找到原因特此记录一番。
解决方案：
1.在保证文中其他规则都正确的情况下，看看你的rules里面的trigger是不是"change"，如果是的话改成其它的。
2.在回显赋值的时候，将表单的第一次校验清除掉。

type: [{ required: true, trigger: 'blur', message: 'xxxx' }],//赋值
this.$nextTick(()=>this.$refs.type.clearValidate()) // 将表单的第一次校验清楚掉

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^