Shulou(Shulou.com)06/03 Report--

This article mainly shows you "vue how to achieve form verification", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vue how to achieve form verification" this article.

I. installation and use

First, install it in your vue project:

Npm install-save vue-input-check

Introduce and register after the installation is complete:

Import inputCheck from 'vue-input-check';// installs Vue.use (inputCheck)

Then we can use it in the form:

As you can see, the v-input-check above is where we define the 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 the rules that need to pass parameters are passed through: Segmentation. Let's look at a few examples:

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

The optional built-in rules are as follows:

Required:boolean: indicates that you must lose. There is an optional parameter that indicates whether you must lose. The default is true.

MaxLength:num: maximum length

MinLength:num: minimum length

Regexp:str: regular expression

Second, obtain the verification result

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

The way 1.JS

You can start the check directly using the following methods:

This.$validateCheck (formnode, callback, errorback)

This object contains three parameters:

Formnode: a form node that needs to be verified. It must be input.

Callback: legal callback of the form, optional

Errorback: illegal callback of form, optional

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

{"$el": incorrect input box node "$error": the first error message in the current input box} 2.HTML method

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

First of all, on the form, you can determine whether the form is legal by determining that the class contains v-valid or v-invalid.

Similarly, where you add the instruction v-input-check, you can also determine whether it is legal or not, while for more specific error details, such as illegal input, class will be like this v-invalid-required v-invalid.

III. Custom verification rules

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

Vue.use (inputCheck, {/ / Custom verification rule validate: [{/ / the name of the rule name: "XXX", / / check method. Returned true indicates legal, while false indicates illegal / / it should be noted that, except for el and val, the remaining parameters are passed through ```: ``division when used. You can have any number of / / for example: ````required:true | phone:parm1:param2 ````test: function (el, val,...) {return true | false }, / / illegal prompt message, should return a string message: function (el, name) {return "XXX";}}, / / there can be multiple verification rules. ]}); the above is all the content of the article "how to implement form validation in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.