Detailed explanation of the use of vee-validate

To learn vee-validate, you can first read the official documents and read the rules on the official website in more detail. There may be some things you don’t understand in English documents. I recommend you to read this blog

Let’s briefly summarize my use:

1. Installation

npm install vee-validate@next --save

@next is added later to install the vue2.0 version

2. Introduce

I'm using the vue-cli scaffolding tool, which needs to be in

import VeeValidate from 'vee-validate'

(VeeValidate);

3. Simple use

It's actually ready to use it at this time. First, go to demo

  <div>
    <label for="email">Mail：</label>
    <input v-validate ="'required|email'" type="text"  name="myEmail">
  </div>
  <span v-show="('myEmail')">{{ ('myEmail')}}</span>

To explain: the required and email behind v-validate are two of the default error types that have been stipulated by the official. You can read the official documentation.
Several methods of errors are used in span, and the parameters here are the names of the form that define the verification rules. List a few errors:

1、first(‘field')

The first error in the field (that is, the name form I just mentioned)

2、collect(‘field')

All errors in field

3、has(‘field')

Is there any error in the field

4、all()

All errors in the current form

5、any()

Is there any error in the current form

6、count()

Number of errors in the current form

7、clear()

Clear all errors in the current form

4. Error prompts for using Chinese

The error prompt that has not been configured is displayed in English by default. If you want to display it in Chinese, we need to configure it manually.

First, it is introduced in

import zh_CN from 'vee-validate/dist/locale/zh_CN'
import { Validator } from 'vee-validate';

Then add another sentence

(zh_CN);

Finally, you need to change the first step (VeeValidate) to

(VeeValidate, {
 locale: 'zh_CN',
});

Now the error message is already in Chinese

V. Configure components

The configuration in the previous point is actually a configuration of components, let’s talk about other configurations.

//Configurationconst config = {
 errorBagName: 'errors', // change if property conflicts.
 fieldsBagName: 'fields',
 delay: 0,
 locale: 'zh_CN',
 strict: true,
 enableAutoClasses: false,
 classNames: {
  touched: 'touched', // the control has been blurred
  untouched: 'untouched', // the control hasn't been blurred
  valid: 'valid', // model is valid
  invalid: 'invalid', // model is invalid
  pristine: 'pristine', // control has not been interacted with
  dirty: 'dirty' // control has been interacted with
 },
 events: 'blur',
 inject: true
};
(VeeValidate, config);

delay refers to the delay time for error prompts; locale is the configuration of Chinese in the previous point, but it is written in config here; strict=true means that forms without rules are not checked, events default is input|blur, which is to check when both user input and form lose focus. Here I changed it to blur, that is, verification will only start when the focus is lost.

5. Modify the default error message

//Modify the default error promptconst dictionary = {
 zh_CN: {
  messages: {
   email: () => 'The email format is incorrect'
  }
 }
};
(dictionary);

The error message of email was modified in the demo, because the Chinese language used (introduced earlier), it is zh_CN. Finally, use the updateDictionary method to add it to the Validator.

6. Custom rules

('qq', {
 messages: {
  zh_CN:field => 'QQ number is incorrect'
 },
 validate: value => {
  return /^[1-9][0-9]{4,14}$/.test(value);
 }
});

The first parameter of extend is the name of the custom rule. You can use it like using the default rule. In messages, there is an error message, and validate is a validation rule, which returns a boolean value or promise.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.