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