VeeValidate 中文文档

介绍

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>