介绍
VeeValidate 是专用于 Vue.js 的验证库。它有很多开箱即用的验证规则，也支持自定义验证规则。
安装
可以通过 npm 或 CDN 来安装该插件
npm:
npm install vee-validate --save
CDN:
2 个国外的 CDN，国内估计危险
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script> <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
引入：
import Vue from 'vue'; import VeeValidate from 'vee-validate'; Vue.use(VeeValidate);
基础示例
我们需要做的就是将 'v-validate' 指令添加到我们想要验证的 input 输入框上，然后确保 input 输入框有一个 name 属性，用来生成错误消息。
之后，给指令传入一个 'rules' 字符串，它包含一系列的，使用 '|' 管道符分隔的验证规则。
对于下面的示例，验证规则非常简单。使用 'require' 来表示字段必填，'email' 来表示字段必须是一个邮箱。为了将这两个规则组合起来，我们将字符串值 'required|email' 作为 'v-validate' 表达式的值。
<input v-validate="'required|email'" name="email" type="text">
为了显示错误消息，我们简单地使用 'errors.first' 方法，来获取该字段生成的第一个错误：
<span>{{ errors.first('email') }}</span>
警告：客户端验证永远不能替代服务器端验证。确保在后端验证用户的任何输入。
指令修饰符
immediate 在页面加载后立即验证字段
<template>
<input v-model="email" v-validate.immediate="'required|email'" name="field" type="text">
</template>
<script>
export default {
data: () => ({
email: ''
})
};
</script>
continues 默认情况下，vee-validate 在验证字段规则时，使用 fastExit 策略。意味着当第一个规则验证失败时，它将停止，且不会验证其余规则。我们可以使用 .continues 修饰符，来强制验证所有规则，而不管这些规则的验证结果。
<template>
<div>
<input v-model="email" v-validate.continues="'required|email'" name="field" type="text">
<ul>
<li v-for="error in errors.collect('field')">{{ error }}</li>
</ul>
</div>
</template>
<script>
export default {
data: () => ({
email: ''
})
};
</script>
我们可以配置 fastExit 选项为 false，来对所有字段启用 '.continues' 修饰符的行为。
提示：.continues 修饰符还有另一个用途，它禁用了 required 规则的检查，意味着，没有 required 规则但是值为空的字段，将不会被跳过。因此，确保我们的自定义规则也能够处理空值。
bails 反过来，如果我们已经配置了 fastExit 为 false，那么我们可以在特定字段上使用 .bail，在第一次验证失败后停止对其他规则的验证。
<template>
<div>
<input v-model="email" v-validate.bails="'required|email'" name="field" type="text">
<span>{{ errors.first('email') }}</span>
</div>
</template>
<script>
export default {
data: () => ({
email: ''
})
};
</script>
Mixin VeeValidate 注入了一个混入(mixin)，通过以下属性来增强我们的 Vue 实例：
$validator - 一个 Validator 实例 errors - 一个 ErrorBag 实例 fields - 一个包含了所有已验证字段的状态标志的对象
提示： 我们可以设置 inject 配置选项为 false，来选择不自动在我们的实例中注入这些属性，但是我们将需要自己管理，提供 $validator 实例，来保证指令正常工作，参阅 '组件注入' 章节。
data-* Attributes data-* 属性为插件提供了一个可选的接口，用来指定应该发生什么，提供了一个简单的、Vue 版本兼容的 API。如果我们不喜欢将复杂的表达式传递给指令，它们将非常有用。
属性 - 描述 data-vv-as - 为字段指定一个漂亮的名称 data-vv-delay - 为触发验证指定的延迟时间(单位是毫秒) data-vv-name - 为字段指定一个名称，用于组件验证并作为 inputs 输入框的回退名称 data-vv-scope - 为字段指定一个作用域。 data-vv-value-path - 指定组件 $data 中的 value 路径，用于检索组件当前值。仅用于组件。 data-vv-validate-on - 用于指定由 '|' 分隔的事件名称列表, 默认值因 inputs 输入框类型而异。
事件
vee-validate 在我们的 input 输入框上监听一组特定事件，这些事件一旦触发，就会触发该字段的验证。默认情况下，vee-validate 监听 input 事件。
如果 input 事件验证对用户来说过于激进，我们可以选择其他触发器(像：change)来触发验证。我们可以配置 vee-validate 的默认事件监听，甚至为特定字段指定特定事件。
改变默认事件：
Vue.use(VeeValidate, { events: 'change' });
如果我们希望监听多个事件，包括自定义事件。只需要使用一个用 '|' 分隔的事件名列表：
Vue.use(VeeValidate, { events: 'change|custom' });
改变每个字段的事件：
我们可以使用 '与 events 配置具有相同值的' data-vv-validate-on 属性，来指定字段进行验证的事件：
<input name="field" v-validate="'required'" data-vv-validate-on="change|custom">
禁用事件验证：
我们可能希望禁用由事件触发的所有验证，例如，我们只想在用户点击提交按钮后进行验证，我们可以通过为 events 配置，指定一个空字符串来实现，该字符串将禁用所有字段的所有监听器。
Vue.use('VeeValidate', {
events: ''
});
或者在 'v-validate' 指令上使用 '.disable' 修饰符，禁用指定字段的事件验证
<input name="field" v-validate.disable="'required'">
触发验证：
this.$validator.validate()
自定义组件
对自定义的组件(自定义select)，数据发生变化，validate拿不到新的数据，需要使用 v-validate:userId="'required|phone'"指定检测userId，并在触发事件中使用 await this.$validator.validateAll()来对提示语关闭或显示(基于事件触发验证情况)
<template>
<my-select :value="userId" name="userId" v-validate:userId="'required'"></my-select>
</template>