深入了解Element Form表单动态验证问题 转载
随风丶逆风 2020-04-03 15:36:41 
2208 Vue 随笔 文章标签： 动态验证 el-form elementUI 表单验证
《vue elementUI组件表单动态验证失效的问题与解决办法》中，讲到直接修改prop属性，未触发form-item的重新渲染，所以虽然有校验*的标志，实际上并不会校验。这是表面现象，最近有了空余时间，去看看了element form组件的源码，找到了根本原因。
《vue elementUI组件表单动态验证失效的问题与解决办法》中讲的强制重新渲染form-item，当时不知道根本原因采用的笨办法。
form-item保留prop属性，根据条件动态修改form组件的rules对象。比如下面这样：watch: {
'formData.age': {
immediate: true,
handler (newVal) {
if (newVal >= 18) {
this.addRule('bankCardNo', [{ required: true, message: '请输入银行卡号', trigger: 'blur' }])
} else {
this.addRule('bankCardNo', [])
}
}
}
}
data () {
return {
rules: {}
}
},
methods: {
addRule (prop, rule) {
this.$set(this.rules, prop, rule)
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
form-item保留prop属性，根据条件动态修改form-item组件的rules属性。比如下面两种方式，因为rules属性接受数据和对象。
label="银行卡号" prop="bankCardNo" :rules="formData.age >= 18 ? [{ required: true, message: '请输入银行卡号', trigger: 'blur' }] : []">
v-model="formData.bankCardNo">>
>
label="银行卡号" prop="bankCardNo" :rules="formData.age >= 18 ? { required: true, message: '请输入银行卡号', trigger: 'blur' } : []">
v-model="formData.bankCardNo">>
>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
总结
终须由浅入深，浮于表面便是管中窥豹，自身还需静下心认真研究