Personal Summary of the Use of vee-validate

To learn vee-validate, you can read it first. Official Documents For more details, you can read the official website rule . English documents may be incomprehensible. I recommend you to read this article. Blog

Here is a brief summary of my use:

I. Installation

npm install vee-validate@next --save

The @next is added to install the version of vue2.0

II. Introduction

I use the vue-cli scaffolding tool, which needs to be in main.js

import VeeValidate from 'vee-validate'

Vue.use(VeeValidate);

3. Simple Use

At this time, it's already available. First, go to demo.

    <div>
        <label for="email">Mailbox:</label>
        <input v-validate ="'required|email'" type="text" id="email" name="myEmail">
    </div>
    <span v-show="errors.has('myEmail')">{{ errors.first('myEmail')}}</span>

Explain: The required and email after v-validate are two of several default error types that have been prescribed by the authorities. This one can read official documents.
Several errors methods are used in span, where the parameters are the name of the form that defines the validation rules. List several methods of errors:
1,first('field')
The first error in field (that is, the name form just mentioned)
2,collect('field')
All errors in field
3,has('field')
Are there any errors in field?
4,all()
All errors in the current form
5,any()
Is there an error in the current form?
6,count()
Number of errors in the current form
7,clear()
Clear all errors in the current form

4. Use Chinese Error Tips

Error prompts that have not been configured are displayed in English by default. If you want to display them in Chinese, you need to configure them manually.
First, we'll introduce it in main.js

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

Next comes another sentence.

Validator.addLocale(zh_CN);

Finally, you need to change the first step of Vue.use(VeeValidate) to

Vue.use(VeeValidate, {
  locale: 'zh_CN',
});

Now the error message is in Chinese.

Configuration components

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

//To configure
const 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
};
Vue.use(VeeValidate, config);

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

5. Modify the default error message

//Modify default error prompts
const dictionary = {
  zh_CN: {
    messages: {
      email: () => 'The mailbox format is incorrect.'
    }
  }
};
Validator.updateDictionary(dictionary);

The error message of email has been modified in demo because the Chinese language used (introduced earlier) is zh_CN. Finally, updateDictionary method is added to Validator.

6. Custom Rules

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

The first parameter of extension is the name of the custom rule, which can be used as the default rule. Messages are error messages and validate is a validation rule, which returns a Boolean value or promise.