How to implement form validation in Vue

1. Installation and use

First, install it in your Vue project:

npm install --save vue-input-check

After the installation is complete, import and register:

import inputCheck from 'vue-input-check';

// Install 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, v-input-check above is where we define the rules for each input box. The value is an array. The first value is 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 are separated by |, and the parameters of the rules that need to pass parameters are separated by :. Let’s look at a few examples:

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

The following built-in rules are currently available:

required:boolean: indicates that the value must be entered. There is an optional parameter indicating whether the value must be entered. The default value is true
maxLength:num: maximum length
minLength:num: minimum length
regexp:str: regular expression

2. Obtaining the Verification Results

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

1.JS method

Simply use the following method to start the check:

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

This object contains three parameters:

• formnode : the form node that needs to be verified, required
• callback : Form validity callback, optional
• errorback : Form illegal callback, optional
  

In addition, the error callback has a parameter with the data format:

{
    "$el": the wrong input box node "$error": the first error message of the current input box}

2. HTML method

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

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

Similarly, where the v-input-check directive is added, you can also determine whether the place is legal. For more specific error details, such as illegal mandatory input, the class will be like v-invalid-required v-invalid .

3. Custom validation rules

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

Vue.use(inputCheck, {

    // Custom validation rules validate: [{

        //Rule name: "XXX",

        // Verification method, return true for legal, false for illegal // Note that, except for el and val, the remaining parameters of this function are passed by ```:``` when used, and there can be any number of them // For example: ``` required:true|phone:parm1:param2 ```
        test: function (el, val, ...) {
            return true|false;
        },

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

});

This is the end of this article about how to implement form validation in Vue. For more relevant content about implementing form validation in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!