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()
          }
        }
      },
  • 相关阅读:
    笔记-[5]-关于JS事件流!
    JS中的模块化开发之Sea.JS
    利用JavaScript如何创建一个table表格[第2种方法]
    二维数组左滑删除某一行
    sdwebimage缓存图片
    scrollView中内部控件的悬停
    (转)将图片保存到相册
    离屏渲染
    标签栏隐藏
    iOS8新特性之交互式通知
  • 原文地址:https://www.cnblogs.com/GoTing/p/14842451.html
Copyright © 2011-2022 走看看