动态切换校验规则
watch: { ‘isEmail‘: { handler: function() { if(this.isEmail){ this.rules={ name: [ { required: false, trigger: ‘blur‘}, ], email: [ { required: true, trigger: ‘blur‘,validator: vaildateEmail }, ], code: [ { required: false, trigger: ‘blur‘,message: ‘该项不能为空‘}, ] } }else{ this.rules={ name: [ { required: true, trigger: ‘blur‘,validator: vaildatePhone }, ], email: [ { required: false}, ], code: [ { required: true, trigger: ‘blur‘,message: ‘该项不能为空‘}, ] } } } } },
用上面的方法，把所有需要校验都覆盖了一次 ，可以实现效果，但是会有一个问题 code 字段都是必填校验，再切换的时候 会自动校验一次，然后提示必填的报错
将对应需要改的，通过修改属性的方法 进行修改，其他不变的 不修改，不全部覆盖对象，在切换的时候就不会有自行校验，然后调用clearValidate讲校验结果进行一次清空
watch: { ‘isEmail‘: { handler: function() { if(this.isEmail){ this.rules.name=[ { required: false, trigger: ‘blur‘}, ]; this.rules.email=[ { required: true, trigger: ‘blur‘,validator: vaildateEmail }, ]; }else{ this.rules.name=[ { required: true, trigger: ‘blur‘,validator: vaildatePhone }, ]; this.rules.email=[ { required: true, trigger: ‘blur‘,validator: vaildateEmail }, ]; } // 清空校验结果 this.$refs[‘ruleForm‘].clearValidate() } } },
element ui 动态切换表单校验遇到的自行校验问题以及清空校验结果
原文：https://www.cnblogs.com/GoTing/p/14842451.html