element form non-mandatory custom validation rules

scenes to be used

As we all know, element comes with some verification rules. For example, to verify the type of some values, we can change the type attribute of the input to achieve the effect we want. If it is required, we can add required to true in the rules. If your The value in the form is not required, but as long as there is a value, the format of the value must be verified? There is no format rule element itself, so we need to customize the validation rules. Two questions, how to write custom validation rules? What to do if it is not required?

Required verification rules and custom verification rules

First of all, let's look at the writing method of the required verification rules

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

At this time, someone will say, if it is not required, you can change the required to false or don’t write it at all. Of course, this is just one of them. Of course I know this, but it’s not a pitfall I encountered. Let’s look at myself first. Define where the validation rules are written.

 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" }]
        }
    }

First of all, there are two points to note. First, the function of custom verification rules is written in data, but not in the {} of retrun. As for why, I don’t understand. As long as this function is used according to the rules of element, five There are three parameters, but usually only three are used. The first rule is the object currently participating in the rule verification, value is the value participating in the verification, and callback is the callback after success. The second point is that this custom validation function needs to be used as the validator value in the objects participating in the validation in the rules. In the verification policyair, I deleted the required attribute, which means it is not required. I thought I could go off work this way, but when I submit the form, it always prompts that the verification fails, or this non-required form is not valid. Passed, so we still can't write required as false, so I locked the problem on the custom verification function.

Rewrite custom function to solve bug

The key problem lies in the callback, where the callback is equivalent to next(), without which the whole program will not go down.

 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" }]
        }
    }

In this way, my problem is solved. When we do custom verification, the regular rules can be found online. We still need to pay a little attention to the logic of verification. Although the problem is not big, it is a waste of time. I hope everyone will not take the same detour as me.