Let's talk about the form validation plug-in VeeValidate this time, so why combine it with Vue? Let's have a look. github The picture above is clear!

Come for Vue! It's not clear whether it's Vue's official form validation plug-in.

Bullshit shows the effect directly:

=============================== dividing line==================================

Why do you need form validation plug-ins? Think about how many form validations you have rewritten and how painful it is to repeat the wheel. Of course, you can build a common set of components yourself. I'm lazy, form validation is off-the-shelf, and VeeValidate scalability is good, so I use it for form validation.

jquery.validate is also a good choice, which is later, this article will only introduce the practice of VeeValidate in Vue.

1. Installation

Introducing projects in support of mode 3

npm

npm install vee-validate --save

bower

bower install vee-validate#2.0.0-rc.4 --save

CDN

https://cdn.jsdelivr.net/vee-validate/2.0.0-rc.3/vee-validate.min.js

2. Configuration and use

I use npm to install and inject dependencies. There are mainly three files for configuration.

===== validate.js: Separate the code for form validation, introduce VeeValidate from node_modules, and configure related items
===== main.js: vue main file entry, introducing validate.js
===== form.vue: Form component

First attach the code in validate.js:

import Vue from 'vue'
import VeeValidate, {Validator} from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN';//Introduction of Chinese Documents

// Configure Chinese
Validator.addLocale(zh);

const config = {
  locale: 'zh_CN'
};

Vue.use(VeeValidate,config);

// custom validate 
const dictionary = {
   zh_CN: {
      messages: {
        email: () => 'Please enter the correct mailbox format',
        required: ( field )=> "Please enter" + field
      },
      attributes:{
        email:'mailbox',
        password:'Password',
        name: 'Account number',
        phone: 'Mobile phone'
      }
  }
};

Validator.updateDictionary(dictionary);

Validator.extend('phone', {
  messages: {
    zh_CN:field => field + 'Must be an 11-digit mobile phone number',
  },
  validate: value => {
    return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
});

From top to bottom are:

1. Form validation dependency files are introduced, and files supporting Chinese error prompts are introduced.

import Vue from 'vue'
import VeeValidate, {Validator} from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN';//Introduction of Chinese Documents

2. Configuration of Chinese error prompts.

// Configure Chinese
Validator.addLocale(zh);

const config = {
  locale: 'zh_CN'
};

Vue.use(VeeValidate,config);

3. If you want to customize the prompt for form validation, there is no default.

// custom validate 
const dictionary = {
   zh_CN: {
      messages: {
        email: () => 'Please enter the correct mailbox format',
        required: ( field )=> "Please enter" + field
      },
      attributes:{
        email:'mailbox',
        password:'Password',
        name: 'Account number',
        phone: 'Mobile phone'
      }
  }
};

Validator.updateDictionary(dictionary);

message: Tips.
attributes: filed.

4. Extend custom validation, such as form validation for custom telephones.

Validator.extend('phone', {
  messages: {
    zh_CN:field => field + 'Must be an 11-digit mobile phone number',
  },
  validate: value => {
    return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
});

The code in main.js:

import './static/js/validate.js'

You just need to introduce validate.js into the main file entry to pave the way, and now you can start writing the form interface.

Code in form.vue component:

<div class="layui-form-item">
    <label class="layui-form-label">account</label>
    <div class="layui-block">
        <input v-model="name" v-validate="'required|min:3|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" name="name" class="layui-input" placeholder="account">
        <span v-show="errors.has('name')" class="text-style" v-cloak> {{ errors.first('name') }} </span>
    </div>
</div>

This is one of the input s.

1. First of all, you have to have the name attribute in input.

2. v-validate attributes: filter in the form of pipeline and verify the condition.

3. span is an error prompt.

errors.first('field') -- Get the first error message about the current field
 collect('field') -- Get all the error information about the current field (list)
has('field') -- Is there an error in the current filed (true/false)
all() -- All errors in the current form (list)
any() -- Is there any error in the current form (true/false)

Here you can complete the basic form validation, different projects will have different requirements, form validation page is different, but VeeValidate supports you to expand, complete a variety of different requirements. You can create your own form validation by referring to official documents, so that different projects can be used with simple modifications.

    Official Address Portal

Excellent articles:
        1,vee-validate form validation
        2,The Use of Vue2.0 Form Check Component vee-validate