关于Vue+Element UI 表单校验那点事儿

最近在用vue+element ui 做后台管理系统开发，不免经常与里面的表单验证有所打交道，就做了些小总结，有不对的地方还请各位小伙伴指出，一起学习进步哈～

首先 我们通常都是由官网的一套代码事例入手的：

?宣代码上殿～～威武！！！

  
    
  
  
    
      
      
    
  
  
    
      
        
      
    
    -
    
      
        
      
    
  
  
    
  
  
    
      
      
      
      
    
  
  
    
      
      
    
  
  
    
  
  
    立即创建
    重置
  

官方大大说：Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并 Form-Item 的 prop 属性设置为需校验的字段名即可。

基本的使用是可以满足的 而且非常的便捷，下面我们就来说说一些特殊情况的时候，我们该如何处理～

一：匹配正则

开发中我们不免要遇到一些需要匹配正则的校验 ，例如判断是否为手机号，输入框特殊字符等等，我们就拿手机号举个例子吧！

rules:{
    phone:[
        {required: true,message:'请输入11位手机号码', trigger: 'blur'},
        {pattern: /^1[34578]\d{9}$/,message:'请输入11位手机号码'}
    ]
}

此时就可以通过添加 pattern 的方式去添加你的校验规则啦。

 

二：validator 校验

如果我们遇到校验规则较多，且较复杂则可以使用validator进行校验。

rules: {
    user: {
        required: true,
        trigger: "blur",
        validator: (rule, value, callback) => {
            if (value) {
                callback();
            } else {
                callback(new Error("请输入角色名称"));
            }
        }
    }
}

value就是我们传入的值，可以尽情的做判断 ，然后通过callback()的方式返回即可，当然也可以将所有的校验规则统一写入一个js文件然后{ validator: 校验方法名称 }调用即可

 

三：动态rules绑定

这个时候就到了三木运算法上场的时候啦～

页面：



js：
 export default {
    data() {
      return {
        users:'',
        rules: {
          haveUser: [
            { required: true, message: '', trigger: 'change' }
          ],
          unUser: [
            { required: true, message: '', trigger: 'change' }
          ]
        }
      };
    }
  }

 

四：清空校验

element ui 也提供给了我们清除校验的方法：

this.$refs[formName].resetFields();

但是这个是清除整个表单校验的，那么如何清除单个表单校验呢～

这里看到了个小姐姐写的方法及时江湖救急：https://juejin.im/post/5c6d003be51d450ba1483cb4

    let _field = this.$refs[表单ref设置的名称].fields; 
    _field.map(i => {
        if (i.prop === "type") { //通过prop属性值相同来判断是哪个输入框，比如：要移除prop为'type'
        i.resetField() 
            i.resetField(); 
            return false;
        }
    });

当然也有仁兄说过对于一些弹窗的表单验证可以采用v-if的方式控制弹窗显隐，让表单重新加载 ，自然也就不会出现表单验证清空的问题啦～

方法千千万，学习路漫漫～

一起加油吧，如果你有更好的方法也可以评论补充哟！比心❤️