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

动态切换校验规则

  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()
      }
    }
  },