How to Implement Form Verification in vue

1. Install and use

First, install it in your vue project:

npm install --save vue-input-check

Introduce 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 as many input boxes as you want  -->
</form>

As you can see, the above v-input-check Where we define rules for each input box, the value is an array, and the first value is the input box v-model The second value is a string with the following syntax:

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

Different rules use segmentation, and the parameters of rules need to be passed 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"]'

The current optional built-in rules are as follows:

required:boolean: Indicates that it is required. There is 1 optional parameter, indicating whether it is required or not. The default is true
maxLength:num: Maximum length
minLength:num: Minimum length
regexp:str: Regular expression

2. Get the verification results

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

1. The way of JS

You can start the check directly by using the following method:

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

This object contains three parameters:

formnode Form node to be verified; Required callback Form legal callback, optional errorback Illegal form callback, optional

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

{
    "$el": Wrong input box node 
    "$error": The first of the current input box 1 Error message 
}

2. Mode of HTML

The purpose of providing this method is to give real-time feedback on the input of the current form on the page.

First of all, on the form, you can judge v-model0 Include v-valid Or v-invalid To determine whether the form is legal.

Again, add instructions v-input-check For more specific error details, such as must-lose illegality, class would look like this v-invalid-required v-invalid .

3. Customize validation rules

In most cases, we may also need to add new validation rules, after all, the default is often not enough to meet all business situations:

Vue.use(inputCheck, {

    //  Custom validation rules 
    validate: [{

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

        //  Verification method, returning true It means legal, false Indicate illegal 
        //  It should be noted that this function is in addition to el And val1 In addition to the existence, the remaining parameters are used when passing ```:``` Split and pass, there can be any number of 
        //  For example: ``` required:true|phone:parm1:param2 ```
        test: function (el, val, ...) {
            return true|false;
        },

        //  Illegal prompt message should be returned 1 String 
        message: function (el, name) {
            return "XXX";
        }
    },
    //  You can have more than one validation rule 
    ......
    ]

});