我在实际项目开发中遇到的关于ElementUI各种表单验证

博客原文地址 https://finget.github.io/2020/02/11/element-form/

第一种 最简单的必填字段

rules: {
  real_operator_id: {required: true, message: '请选择委托方', trigger: 'change'}
}

第二种 正则验证字段

rules:{
  capacity: [
    {required: true, message: '请输入容纳人数', trigger: 'change'},
    {pattern: /^[1-9][0-9]{0,3}$/, message: '只能输入正整数，且不超过4位数', trigger: 'change'}],
}

⚠️什么电话、邮箱、数字、英文、汉字...等能用正则验证都可以用这个方式。

第三种 富文本必填验证

rules: {
  content: [
    {required: true, message: '请填写政策内容', trigger: 'change'}
  ],
}

这里采用一个骚操作，原本输入框的验证都是监听的输入框的各种事件（change,blur）,然而富文本都是第三方插件，无法监听到，所以就利用了vue的双向绑定原理，写一个隐藏的输入框，搞定。

第四种 多个输入框

data() {
  let checkBuilding = (rule, value, callback) => {
    if (!this.form.building_id) {
        callback(new Error('请选择写字楼'));
    } else if (!this.form.building_detail.id) {
        callback(new Error('请选择楼栋'));
    } else if (this.unitList.length && !this.form.building_detail.unit_id) {
        callback(new Error('请选择单元'));
    } else if (!this.form.building_detail.floor) {
        callback(new Error('请填写楼层'));
    } else {
        callback();
    }
  };
  return {
    rules: {
      building_id: {required: true, validator: checkBuilding, trigger: 'change'},
    }
  }
}

第五种 动态验证-普通的动态验证

官网拷贝的代码，占个位置。

    
    删除

第六种 动态验证-多个输入框验证

第一种情况 每个输入框单独验证

在样式很好控制的情况下,循环生成多个 ,单独验证

  
      
          
          
      
  
  
      
          
          
      
  
  
      
        
        
      
  
  
      

        
            层
        
      
  

第二种情况 统一验证

有的时候，迫于样式的困扰，我们只能写多个输入框，而不能生成多个 ,在同一个 下统一验证

  
    

      
 
          使用前 
          
           小时取消，扣除订单总额 
          
           %费用(不含保证金)
        
    
  

rule长这样:

methods: {
  // 验证rule
  checkRules(rule, value, callback) {
    // 通过rule.field 拿到index ，剩下的都常规操作了 
    let index = rule.field.split('.')[1] - 0;
    if (!this.form.rules[index].hours || !this.form.rules[index].percent) {
      callback(new Error('请填写规则'));
    } else if (Number(this.form.rules[index].percent) > 100) {
      callback(new Error('百分比不能超过100%'));
    } else {
      callback();
    }
  },
}

第七种 动态验证-关联验证

填了租金才会触发对应的租金时间段验证

第八种 动态验证-判重

    ....

attentionIndustryValidator(rule, val, callback) {
  let num = 0;
  this.industryForm.follow.forEach(item => {
  // 这里做一次数组判重
    if (this.equals(val, item.industry)) {
      num++;
    }
  });
  if (num >= 2) {
    callback(new Error('请勿重复选择相同的行业!'));
  } else {
    callback();
  }
},

第九种 清除某一个输入项验证

如图开始选择了意向类型为 按面积，此时已经验证了意向面积的值，并提示错误信息，然后切换为 按工位,如果不清除意向面积的验证，则 错误信息会一直存在。

...

watch: {
  'form.intention_type': {
    handler() {
      this.$refs['areaForm'].clearValidate();
    }
  }
},

最后

我们自定义验证（validator），有两种方式。

• 第一种 定义在data中

data() {
  let testrule1 = (rule,val,callback) => {};
  return {}
}

使用方式是在data中的rule里引入：

data(){
  let testRule1 = (rule,val,callback) => {};
  return {
    rules: {
      name:{required: true, validator:testRule1, trigger:'blur'}
    }
  }
}

• 第二种 定义在methods中

methods: {
  testRule2(rule, val, callback) {}
}

使用方式是在中引入:

    ...