element表单非必填自定义校验规则

使用场景

众所周知element自带了一些校验规则，比如说校验一些值的类型我们可以改变input的type属性来达到我们想要效果，如何是必填，我们rules中加入required为true就好，如果你的表单中的值不是必填项，但只要有值就要校验值的格式呢？格式的规则element本身没有，所以我们要自定义校验规则。两个问题，自定义校验规则怎么写？非必填怎么做？

必填校验规则与自定义校验规则

首先我们看必填的校验规则写法

data(){
    return{
          rules:{
        policyair: [{ required: true, message: "校验失败的消息提示", trigger: "change" }]
        }
    }
}

这时候有人就要说了，非必填你把required改为false或者压根不写不就完事了嘛，当然这只是其一，这个我当然知道，但不是我遇到的坑，我们先看自定义校验规则写在哪。

 data() {
    let checkwhitename = (rule, value, callback) => {
      const regwhitename = /^\w{2}(,\w{2})*$/;
        if (regwhitename.test(value)) {
           return callback();
        }else{
          callback(new Error("请参照示例输入白名单或黑名单"));
        }
    };
    return {
       rules:{
        policyair: [{validator: checkwhitename, trigger: "blur" }]
        }
    }

首先两点要注意，第一点，自定义校验规则的函数写在data中，但不是在retrun的{}中，至于为什么我也不明白，这个函数只要按照element的规则使用会传入五个参数，但是通常只用三个，第一个rule是当前参与规则校验的对象，value是参与校验的值，callback是成功之后的回调。第二点，这个自定义校验的函数，需要在rules中作为参与校验的对象中validator的值。在校验policyair中我把required属性删掉了，就是非必填，我以为这样我可以下班了，可当我提交表单时，总是提示校验不通过，还就是这个非必填的表单不通过，于是我们把required写成false还是不行，于是我把问题锁定在自定义校验函数上。

重写自定义函数解决bug

关键问题还是在于这个callback，这里callback就相当于next(),没有它整个程序不会往下走。

 data() {
    let checkwhitename = (rule, value, callback) => {
      const regwhitename = /^\w{2}(,\w{2})*$/;
      if (!value) { //所以当没有值的时候，我们直接callback，让他不校验直接执行下一步
        return callback()
      }else{
        if (regwhitename.test(value)) {  //验证通过也下一步
           return callback();
        }else{
          callback(new Error("请参照示例输入白名单或黑名单")); //验证不通过下一步只是抛出个错误
        }
      }
    };
    return {
       rules:{
        policyair: [{validator: checkwhitename, trigger: "blur" }]
        }
    }

这样我的问题就解决了，当我们做自定义校验的时候，正则可以网上找，校验的逻辑我们还是要稍微注意一下的。问题虽然不大，但浪费时间，希望大家不要走和我一样的弯路。