How Vue implements form verification

Install and use

First, install in your Vue project:

npm install --save vue-input-check

Import and register after installation:

import inputCheck from 'vue-input-check';

//Installation
Vue.use(inputCheck);

Then we can use it in the form:

<form autocomplete="off" novalidate>
    < input V-model ='key 'name =' input box name 'v-input-check =' [key, "validate express"] '/ >
    <!--  You can have any number of input boxes -- >
</form>

As you can see, the above v-input-check is where we define rules for each input box. The value is an array. The first value is the V-model of the input box and the second value is a string. The syntax is as follows:

validate-express="val1:param1:param2|val2|valu3:param1"

Different rules use | segmentation. The parameters of rules that need to pass parameters pass through: segmentation. Let’s look at a few examples:

    v-input-check='[key,"required|maxLength:10|regexp:^\\d{1,5}$"]'
    v-input-check='[key,"required"]'

Currently, the optional built-in rules are as follows:

Required: Boolean: indicates required. There is an optional parameter indicating whether it is required. The default is true
    MaxLength: num: maximum length
    Minlength: num: minimum length
    Regexp: STR: regular expression

Get verification results

After the rules of the page are defined, you have two ways to obtain the verification results.

1. JS mode

Start the inspection directly by using the following methods:

this.$validateCheck(formnode, callback, errorback);

This object contains three parameters:

Formnode: the form node to be verified; required
    Callback: Legal callback of the form; optional
    Errorback: illegal callback of the form; optional

In addition, the error callback has a formal parameter, and the data format is:

{
    '$El': wrong input box node
    "$error": the first error message in the current input box
}

2. HTML mode

The purpose of this method is to feed back the input of the current form in real time on the page.

First, on the form, you can judge whether the form is legal by judging whether the class contains v-valid or v-invalid.

Similarly, the place where the instruction v-input-check is added can also judge whether it is legal. For more specific error details, such as mandatory illegal, class will be like v-invalid-required v-invalid.
Custom verification rules

Custom verification rules

In most cases, we may also need to add new verification rules. After all, the default is often not enough to meet all business conditions:

Vue.use(inputCheck, {

    //Custom verification rules
    validate: [{

        //Name of the rule
        name: "XXX",

        //Verification method. Returning true means legal, and false means illegal
        //It should be noted that except that El and val must exist in this function, the remaining parameters are passed through ` ` `: ` ` ` segmentation when using this function. There can be any number of parameters
        //For example: ` ` ` required: true | phone: parm1: param2```
        test: function (el, val, ...) {
            return true|false;
        },

        //Illegal prompt, a string should be returned
        message: function (el, name) {
            return "XXX";
        }
    },
    //There can be multiple verification rules
    ......
    ]

});