VeeValidate——vue2.0表单验证插件

一、vee-validate入门

　　vee-validate 是一个轻量级的 vue表单验证插件。它有很多开箱即用的验证规则，也支持自定义验证规则。它是基于模板的，因此它与HTML5验证API类似且熟悉。可以验证HTML5输入以及自定义Vue组件。

　　项目地址：vee-validate

　　官方文档：VeeValidate

 1、安装

# NPM安装
$ npm install vee-validate --save

# CDN安装
<!-- jsdelivr cdn -->
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/vee-validate@latest"></script>

2、引用

（1）方法一：在main.js中添加

　　这里使用的是ES6/ES2015语法。ES2015语法是从ES5的一次巨大飞跃，它给JavaScript增加了大量的功能特性。

import Vue from 'vue'
import axios from 'axios'
import VeeValidate, {Validator} from 'vee-validate';
import veeMessage from 'vee-validate/dist/locale/zh_CN';

// 添加表单验证
Vue.use(VeeValidate, {
  classes: true,
  classNames: {
    valid: 'is-valid',
    invalid: 'is-invalid'
  }
});

// 使用中文提示
Validator.localize('zh_CN', veeMessage);

　　zh_CN是从 node_module/vee-validate/dist/locale目录下拷贝到项目中的中文语言包。

（2）方法二：直接包含脚本

<script src="path/to/vue.js"></script>
<script src="path/to/vee-validate.js"></script>
<script>
  Vue.use(VeeValidate); // good to go.
</script>

3、基本使用

　　只需要将 v-validate 指令添加到要验证的输入中，并确保输入中包含生成错误消息的 name 属性。然后，向指令传递一个 rules 字符串，其中包含由管道 ‘|’ 分隔的验证规则列表。

<input v-validate="'required|email'" name="email" type="text">

　　在上面示例中， required 表明该字段是必须的，email 则表示该字段必须为电子邮件。因此使用结合这两个规则，声明字符串变量 required|email 给 v-validate 表达式的值。

　　如果要显示错误信息，只需使用 errors.first 方法获取该字段生成的第一个错误：

<span>{
   { errors.first('email') }}</span>

　　但是需要注意：客户端验证永远不能替代服务器验证，确保在后端验证用户的任何输入。

　　提醒：错误信息里面的名称通常就是表单的name属性，除非是通过Vue实例传递进去的。

　　提醒：养成习惯，给每个field添加 name 属性，如果没有 name 属性又没有对值进行绑定的话，validator 可能不会对其进行正确校验。

二、显示错误

　　errors是组件内置的一个数据模型，用来存储和处理错误信息。默认情况下，错误包实例将注入组件 errors 名称下的计算属性中，可以对其进行自定义以避免与其他 库/组件 发送冲突。

1、显示单个错误消息

　　希望一次为字段显示一个错误，使用 erro