表单自定义检验规则

Element-ui vue自定义表单检验规则

Elemnet表单 <el-form>具有检验规则Form 组件，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即

例如：

      <el-form ref="form" :model="form" label-width="80px" :rules="rule">
          <el-form-item label="活动名称" prop="name">
              <el-input v-model="form.name"></el-input>
          </el-form-item>
      </el-form>

      data(){
          return{
              rules:{
                  name:[
                {required:true,message:"输入活动名称",trigger:"blur"},
                {min:4,max:16,message: '长度在 4 到 16 个字符', trigger: 'blur' }
                  ]
                  ....
              }
          }
      }

未输入的结果

输入不达标的结果

上面这段代码可以在失去焦点时检验input框,按照 input 框对应的 prop 属性去data中的 rules 属性中找
另外还有

属性名	用处
type	标志要使用的validator的数据类型
required	必填
message	提示内容
trigger	触发条件 （change或blur）
min	最小值
max	最大值
len	精准长度 (优先级高于min,max)
enum	枚举中存在该值 (type必须为enum类型)
whitespace	不能包含空白符
pattern	正则 (必须加 required: true)

属性对应的值有bool,object等

可以看出只能应付基本的检测情况，这时就需要使用自定义检测规则

只需要在data数据前申明处理函数，如：

  data(){
    const checkChinese=(rule,value,callback)=>{
        let temp=/[\u4E00-\u9FA5]/;//判断是否是中文
        let number=0;
           for(const p of value){
            if(temp.test(p)) number+=2;
            else number++;
            }
        if(number<4||number>16){
           callback(new Error("长度在 4 到 16 个字符")) 
        }
        else
            callback();
        }
        ...
  }

//这个函数的用处是获取输入框中的长度，其中中文算两个；

调用

rule:{
    name:[
        {required:true,message:"输入活动名称",trigger:"blur"},
        {validator:checkChinese,trigger:"blur"}//在这声明即可；
        ]}

修改结果

用处

我们可以把网上丰富的检验方法封装成一个个函数，简单修改下就能实现一个方法，例如：

module.exports = {
    Username(rule, value, callback) {
        let reg = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,12}$/
        matching(value, callback, reg, '请输入6-12位字母和数字组合')
    }, SimplePwd(rule, value, callback) {
        let reg = /^[_a-zA-Z0-9]+$/
        matching(value, callback, reg, '包含英文字母、数字及下划线组成')
    }, ComplexPwd(rule, value, callback) {
        let reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){8,20}$/
        matching(value, callback, reg, '请输入8-20位英文字母、数字或者符号')
    }, Phone(rule, value, callback) {
        let reg = /^[1][3, 4, 5, 6, 7, 8][0-9]{9}$/
        matching(value, callback, reg, '请输入正确的手机')
    }, Email(rule, value, callback) {
        let reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
        matching(value, callback, reg, '输入正确的邮箱')
    }, IdCard(rule, value, callback) { let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ 
       matching(value, callback, reg, '输入正确的身份证号码') }, Company(rule, value, callback) {
        let reg = /^[A-Z0-9]{8}-[A-Z0-9]$|^[A-Z0-9]{8}-[A-Z0-9]-[0-9]{2}$/
        matching(value, callback, reg, '请输入正确的营业执照')
    }, Weixin(rule, value, callback) {
        let reg = /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/
        matching(value, callback, reg, '请输入正确的微信号')
    }, Integer(rule, value, callback) {
        let reg = /^[1-9][0-9]*$/
        matching(value, callback, reg, '请输入正确的整数')
    }, Number(rule, value, callback) { let reg = /^\d+$|^\d+[.]?\d+$/  
          matching(value, callback, reg, '请输入纯数字') }, 
          Landline(rule, value, callback) { 
        let reg = /^(\d{3,4}-)?\d{7,8}$/   
         matching(value, callback, reg, '请输入正确的座机') 
     },
          Ip(rule, value, callback) {
               let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/  
          matching(value, callback, reg, '请输入正确的IP')
     },
         Price(rule, value, callback) { let reg = /^-?\d{1,4}(?:\.\d{1,2})?$ /  
         matching(value, callback, reg, '请输入正确的价格') 
    }, 
         BankCard(rule, value, callback) { 
        let reg = /^([1-9]{1})(\d{14}|\d{18})$/   
         matching(value, callback, reg, '请输入正确的银行卡') }
}

注意事项

不能同时将两个不同的input框的prop指向同一个rule的值，即使两个input框的处理方法相同，需要声明两个不同名字的rule

            name:[
                {required:true,message:"输入活动名称",trigger:"blur"},
                {validator:checkChinese,trigger:"blur"}
              ],
            name1:[
                {required:true,message:"输入活动名称",trigger:"blur"},
                {validator:checkChinese,trigger:"blur"}
              ]