一、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