README

vee-validate 是一个轻量级的 Vue.js 插件，允许您验证输入字段并显示错误。

其独特之处在于：您不需要在您的应用程序中进行任何复杂的操作，大部分工作都在 HTML 中完成。您只需指定每个输入值变化时应使用哪种验证器。然后您将收到每个字段的错误通知。

尽管大多数验证都是自动发生的，但您可以使用验证器以您认为合适的方式。验证器对象没有依赖项，是一个独立的对象。此插件考虑了本地化，目前插件中提供了超过 20 个验证规则。有关更多信息，请参阅 文档。

此插件受到 PHP 框架 Laravel 的验证 的启发。

安装

npm

npm install vee-validate --save

或者如果您使用的是 Vue 1.0

npm install vee-validate@prev --save

bower

Vue 1.0:

bower install vee-validate#1.0.0-beta.11 --save

Vue 2.0:

bower install vee-validate#2.0.0-beta.18 --save

CDN

vee-validate 也可在 jsdelivr cdn 上使用

选择您要使用的版本。

入门

在您的脚本入口点

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

现在您已准备好使用此插件。

使用

只需在您的输入上应用 v-validate 指令和一个 data-vv-rules 属性，该属性是使用管道分隔的验证列表，例如我们将使用 required 和 email 验证器。

<input v-validate data-vv-rules="required|email" type="text" name="email">

现在每次输入更改时，验证器都会从左到右运行验证列表，当输入验证失败时填充错误辅助对象。

要访问错误对象（在您的 Vue 实例中）

this.$validator.errorBag;
// or
this.errors; // injected into $data by the plugin, you can customize the property name.

所以让我们显示我们创建的电子邮件输入的错误

<!-- If it has an email error, display the first message associated with it. -->
<span v-show="errors.has('email')">{{ errors.first('email') }}</span>

当然，还有更多，请参阅文档以获取有关规则和此插件使用的更多详细信息。

文档

阅读 文档和示例。

兼容性

此插件应与主要浏览器兼容，但需要在较旧的浏览器上使用一些 polyfills 才能工作。

它们没有被包含在内是因为大多数工作流程已经在其代码中使用了 polyfills，为了减小包大小，冗余的 polyfills 已被删除。您可以使用 Polyfill.io 自动提供所有浏览器所需的 polyfills，或者您可以自己提供。

贡献

欢迎您通过此仓库贡献您认为有用的任何内容。修复是非常受欢迎的。但是，如果您正在添加新的验证规则，它应该有多个用途或者尽可能通用。

更多详细信息请参阅贡献指南。

教程和示例

• 使用Vue.js 2进行表单验证，作者：Alex Kyriakidis
• Vue多步骤表单，作者：Dave Stewart

许可协议 MIT