先说个简单的,表单校验问题,表格里面的prop必须和v-model绑定的变量名一致!
如element-ui官网的代码:
<el-form-item prop="date1"> <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker> </el-form-item>
另外一个表单校验问题
背景:
界面上新增及更新按钮,弹窗进行表单填写及提交。
对于新增及更新的弹窗,代码里面实际用了同一个表单form,更新的时候就是把row对于值带入form,因此等于是更新和新增都绑定了同一个对象变量。
使用上面element-ui官网的代码做示例:
新增按钮
id | data1 | action |
112 | 2019-01-01 | 更新按钮 |
<el-form-item prop="date1"> <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker> </el-form-item>
rules: {
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
]
}
问题:
打开新增弹窗,触发rules校验不通过(即出现红色提示小字),点击弹窗的取消键。
打开更新弹窗,发现即使date1日期输入框输入了日期,还是会出现校验不通过的情况,并且怎么输入都是校验不通过,即trigger不起作用
只能再打开新增弹窗,触发rules校验通过,然后回到更新弹窗才恢复正常
解决:
经过查找,发现代码里面打开新增窗口,触发了校验,关闭窗口后,ruleForm.date1就产生了(值是undefined),然后打开更新窗口,ruleForm.date1带了过来,虽然代码通过重新复制,改变了ruleForm.date1的值,但校验不通过的结果也带了过来(没法再次触发校验的问题没找到原因,有兴趣的可以看element源码)。解决方案就是在更新窗口给ruleForm.date1赋值前先重置ruleForm对象:ruleForm = {},这样就把之前的校验结果给清除了。
以防万一,再在更新窗口中赋值后加上下面代码
this.$nextTick(() => {
this.$refs['ruleForm'].clearValidate()
})