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、显示单个错误消息
希望一次为字段显示一个错误，使用 errors.first('fieldName') 方法执行此操作。
<input type="text" name="fieldName" v-validate="'required'"> <span>{{ errors.first('fieldName') }}</span>
VeeValidate 默认每个字段仅生成一条消息，因为它在运行验证管道时使用快速退出策略。当检测到第一个失败规则时，它将生成消息并将其存储在错误包实例中，然后忽略其他规则结果。
要禁用此行为，需要 fastExit 在 VeeValidate的配置中 配置选项或使用 continues 修饰符。
2、显示多条错误消息
通常应用场景是允许用户一次修复多个输入错误。errors.collect('fieldName') 方法可以将特定字段的所有错误消息收集到数组中。
<input type="text" name="fieldName" v-validate.continues="'required|alpha|min:5'"> <ul> <li v-for="error in errors.collect('fieldName')">{{ error }}</li> </ul>
3、显示所有错误
如果需要在表单上显示所有字段错误，尤其是非常大的表单。
（1）错误列表
可以使用 errors.all() 将所有字段错误收集到单个平面数组中。
<input type="text" name="first" v-validate.continues="'required|alpha|min:5'"> <input type="text" name="second" v-validate.continues="'required|alpha|min:5'"> <ul> <li v-for="error in errors.all()">{{ error }}</li> </ul>
（2）按字段名称分组
使用 erros.collect() 按字段名称对错误消息进行分组，其中键是字段名称，值是每个字段的错误消息数组：
<input type="text" name="first" v-validate.continues="'required|alpha|min:5'"> <input type="text" name="second" v-validate.continues="'required|alpha|min:5'"> <ul> <li v-for="group in errors.collect()"> <ul> <li v-for="error in group">{{ error }}</li> </ul> </li> </ul>
三、内置的验证规则
1、内置验证规则汇总
after{target} - 比target要大的一个合法日期，格式(DD/MM/YYYY)
alpha - 只包含英文字符
alpha_dash - 可以包含英文、数字、下划线、破折号
alpha_num - 可以包含英文和数字
before:{target} - 和after相反
between:{min},{max} - 在min和max之间的数字
confirmed:{target} - 必须和target一样
date_between:{min,max} - 日期在min和max之间
date_format:{format} - 合法的format格式化日期
decimal:{decimals?} - 数字，而且是decimals进制
digits:{length} - 长度为length的数字
dimensions:{width},{height} - 符合宽高规定的图片
email - 不解释
ext:[extensions] - 后缀名
image - 图片
in:[list] - 包含在数组list内的值
ip - ipv4地址
max:{length} - 最大长度为length的字符
mimes:[list] - 文件类型
min - max相反
mot_in - in相反
numeric - 只允许数字
regex:{pattern} - 值必须符合正则pattern
required - 不解释
size:{kb} - 文件大小不超过
url:{domain?} - (指定域名的)url
2、内置规则使用示例
<input type="text" class="form-control" id="tel" v-model="queryInfo.tel" placeholder="手机号码" v-validate="'min:11|max:11|numeric'" name="tel" data-vv-as="手机号码"> <input type="text" class="form-control" id="idNum" v-model="queryInfo.idNumCipher" placeholder="身份证号" v-validate="'required|max:18|min:18|alpha_num'" name="idNum" data-vv-as="身份证号"> <input type="text" class="form-control" id="emailnum" v-model="queryInfo.email" placeholder="电子邮箱" v-validate="'email'" name="emailnum" data-vv-as="电子邮箱">
如果使用了 data-vv-as 属性，在输入生成任何错误消息时，它将使用 data-vv-as 值而不是实际的字段名称。
这样对于简单设置和显示本地化名称非常有用，但仅适用于单一语言环境页面。
四、自定义验证规则
1、直接定义
const validator = (value, args) => { // Return a Boolean or a Promise. } //最基本的形式，只返回布尔值或者Promise，带默认的错误提示
2、对象形式
const validator = { getMessage(field, args) { // 添加到默认的英文错误消息里面 // Returns a message. }, validate(value, args) { // Returns a Boolean or a Promise. } };
3、添加到指定语言的错误消息
const validator = { messages: { en: (field, args) => { // 英文错误提示 }, cn: (field, args) => { // 中文错误提示 } }, validate(value, args) { // Returns a Boolean or a Promise. } };
创建了规则之后，用extend方法添加到Validator里：
import { Validator } from 'vee-validate';
const isMobile = {
messages: {
en:(field, args) => field + '必须是11位手机号码',
},
validate: (value, args) => {
return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
}
}
Validator.extend('mobile', isMobile);
//或者直接
Validator.extend('mobile', {
messages: {
en:field => field + '必须是11位手机号码',
},
validate: value => {
return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
}
});
然后可以直接把mobile当成内置规则使用：
<input v-validate data-rules="required|mobile" :class="{'input': true, 'is-danger': errors.has('mobile') }" name="mobile" type="text" placeholder="Mobile"> <span v-show="errors.has('mobile')" class="help is-danger">{{ errors.first('mobile') }}</span>
4、自定义内置规则的错误信息
import { Validator } from 'vee-validate';
const dictionary = {
en: {
messages: {
alpha: () => 'Some English Message'
}
},
cn: {
messages: {
alpha: () => '对alpha规则的错误定义中文描述'
}
}
};
Validator.updateDictionary(dictionary);
5、常用自定义规则
Validator.localize('zh_CN', veeMessage);
// 自定义身份证号码验证
Validator.extend('idCardNum', {
getMessage: field => '请输入正确的身份证号码',
// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
validate: value => /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)
});
// 自定义手机号码验证
Validator.extend('mobile', { // extend的第一个参数就是自定义的规则的名字
getMessage: field => '请输入正确的手机号码', // getMessage中是错误提示信息
validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value) // validate是验证规则，返回一个布尔值或promise
});
// 自定义敏感词过滤
const sensitiveWordRule = {
getMessage: (field, args) => field + '敏感字段',
validate: (value, args) => {
let sensitiveMap = makeSensitiveMap(sensitiveWordList);
console.log('sensitivemap', sensitiveMap);
if (checkSensitiveWord(sensitiveMap, value).length > 0) {
console.log(checkSensitiveWord(sensitiveMap, value))
return false;
} else {
console.log(checkSensitiveWord(sensitiveMap, value))
return true;
}
}
};
Validator.extend('sensitiveWordFilter', sensitiveWordRule);
6、与相关组件配合验证
针对Enums和Select(src/components/chart/Select2.vue)验证：
// 自定义 Enmus 验证 Validator.extend('enums', { // extend的第一个参数就是自定义的规则的名字 validate: value => value > 0 && value != null && value != undefined // validate是验证规则，返回一个布尔值或promise }); // 自定义 Select2 验证 Validator.extend('select2', { // extend的第一个参数就是自定义的规则的名字 getMessage: field => field + '不能为空', validate: value => value > 0 && value != null && value != undefined // validate是验证规则，返回一个布尔值或promise });
针对 Datepicker 验证：
// 自定义时间区间选择组件 Datepicker 验证 -- 起止时间验证 Validator.extend('datepickerwrongrange', { getMessage: field => '起止时间不能相等', validate: function (value) { var d = value.split('-'); var beginTime = parseInt(d[0]); var endTime = parseInt(d[1]); if(beginTime == endTime) { return false; } else { return true; } } }); // 自定义时间区间选择组件 Datepicker 验证 -- 开始时间验证 Validator.extend('datepickerwrongbegin', { getMessage: field => '开始时间不能小于当前时间后的一小时', validate: function (value) { var d = value.split('-'); var beginTime = parseInt(d[0]); var endTime = parseInt(d[1]); if(beginTime <= (Date.parse(new Date()) + 3600*1000)) { return false; } else { return true; } } });
