0
点赞
收藏
分享

微信扫一扫

element ui 动态切换表单校验遇到的自行校验问题以及清空校验结果

RockYoungTalk 2022-07-12 阅读 68

 

动态切换校验规则

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 字段都是必填校验,再切换的时候 会自动校验一次,然后提示必填的报错

 

element ui 动态切换表单校验遇到的自行校验问题以及清空校验结果_字段

 

 将对应需要改的,通过修改属性的方法 进行修改,其他不变的 不修改,不全部覆盖对象,在切换的时候就不会有自行校验,然后调用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()
}
}
},

 



举报

相关推荐

0 条评论