zoukankan      html  css  js  c++  java
  • 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()
          }
        }
      },
  • 相关阅读:
    set与map
    统计一个字符串中出现了多少个不同的字符
    求序列中所有不同的连续子串的数量
    79、idea IDE Eval Reset
    78、idea控制台报 java: 无效的目标发行版: 14
    16、docker安装minio
    77、idea中添加maven项目右侧无maven
    76、mysql5.7安装教程
    74、js向上递归
    72、解决IntelliJIDEA没有Spring Initializr
  • 原文地址:https://www.cnblogs.com/GoTing/p/14842451.html
Copyright © 2011-2022 走看看