How to use VeeValidate to perform form verification function in vue project

This time I will show you how to use VeeValidate to perform form verification in the vue project. What are the precautions? The following is a practical case. Let’s take a look.

What is VeeValidate:

VeeValidate is a verification library for Vue.js. It has many

validation rules, and Support custom rules. It's based on templates, so it's similar and familiar to the HTML5 validation API. You can validate HTML5 input as well as custom Vue components. It's also built with localization in mind, in fact we have around 44 languages supported and maintained by wonderful community members.

This article contains VeeValidate including the following applications:

1. Basic installation and use

2. Localization support

3. Custom rules and error messages

4. Validation of HTML5 input and custom Vue components

5. Unified submit button processing

Take a look at the page effect first:

If you want to see the gif effect, you can go to my github (

https://github.com/ HongqingCao/My-Code/tree/master/VeeValidate) to watch and provide example source code downloads. Let’s step into the topic:

Basic installation and use

Usage of VeeValidate Two methods are supported: one is: NPM/yarn (npm install vee-validate --save), the other is: CDN.

This article is quoted in the form of CDN:

Note: Four js files are introduced. The first two are briefly discussed, and the latter two are vee-validata and zh_CN Chinese language package. File

html page part:

Note: This contains the following VeeValidate knowledge points:

1.

v-validate in the input/textarea tag , data-vv-as, nameattribute. (v-model is a two-way binding here to facilitate passing these parameters to the interface request, so I won’t introduce too much) 2.v-show="errors.has('remark')" in the error message tagand **{{ errors.first('remark') }}**

v-validate:

v-validate directive is added to the Validate the input and make sure your input has the name attribute used to generate the error message. The directive is then passed a rules

stringcontaining a list of validation rules separated by a pipe '|'. For example, for thePublication Yearcopy verification above, userequiredThis option is required,pubYearto indicate that the field must be in the year format (of course here is customized), digits: 4, the number length is 4. To combine these two rules, we specify the value of the v-validate expression with the string value required|pubYear|digits:4.

data-vv-as:

When any error message is generated for this input, it will use that data-vv-as value instead of the actual field name , the default error prompts are all in English. If you set this, the error prompt field name will prompt data-vv-as value

v-show="errors.has('remark')

The default error prompt label is not loaded

errors.first('remark')

Get the first information about the current remark

Error message

js part:

Okay, let’s read this code together

Comment: The meaning of the above code Yes 1. Change to the language environment of zh_CN noon. If you do not change the default prompt is English 2. Install the VeeValidate plug-in, which can also be understood as initialization

Note: The above code changes the default prompt, and the name attribute cannot be added. Empty, that is, the non-empty judgment of required items

Note: The above code modifies the custom rule getMessage: prompt. validate: It is the matching rule, usually regular.

注释：上代码创建一个提交按钮事件，监听是否正常填写选项，实现校验

一个完整的校验应用案例到这里已经讲解的差不多了，小伙伴们可以根据自己的实际情况应用在自己的项目中，如果需要深入了解，可以移步到官网https://baianat.github.io/vee-validate/guide/。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何操作Vue内使用vee-validate

Node.js笔记process模块使用详解

The above is the detailed content of How to use VeeValidate to perform form verification function in vue project. For more information, please follow other related articles on the PHP Chinese website!