引用vee-validate插件表单验证（cdn方式引入）
之前用的是webpack打包工具写的项目，后来需求改成静态页面的方式，所以又要把一些引入方式改过来，这就是前端麻烦的地方。
网上也有很多npm引入方式的，主要是老版本和新版本vee-validate引起的问题（特别是中文错误提示的引用问题），我这里写一下关于cdn方式引入，中文包配置的问题。
一、 CDN方式（官网）
二、 结合Vue使用
Vue.use(VeeValidate, {
events: 'change' //这里的events是触发事件，例如失去焦点验证，我这里用的是输入改变校验
});
Vue引入这里就不详解了，不知道的自行百度。
网上有很多配置参数，有需要的可以去查一下，我这里没用到就没写了，网上有些也是花里胡哨的，没必要，只是做个验证，搞得脑子疼。
不加参数就是这样：
Vue.use(VeeValidate);
三、使用中文错误提示
先下载中文包
https://cdn.bootcss.com/vee-validate/2.2.15/locale/zh_CN.js
没办法，暂时没有找到新版本zh_CN.json的使用方式，cdn引入方式就用这个中文提示包就行了，webpack项目的不会存在这个问题。
之后再调用即可：
VeeValidate.Validator.localize('zh_CN');
如果不使用这个包的可以引用一下代码：
VeeValidate.Validator.localize({
zh_CN: {
messages: {
_default: (field) => `${field}的值无效`,
after: (field, [target, inclusion]) => `${field}必须在${target}之后${inclusion ? '或等于' + target : ''}`,
alpha: (field) => `${field}只能包含字母字符`,
alpha_dash: (field) => `${field}能够包含字母数字字符、破折号和下划线`,
alpha_num: (field) => `${field}只能包含字母数字字符`,
alpha_spaces: (field) => `${field}只能包含字母字符和空格`,
before: (field, [target, inclusion]) => `${field}必须在${target}之前${inclusion ? '或等于' + target : ''}`,
between: (field, [min, max]) => `${field}必须在${min}与${max}之间`,
confirmed: (field, [confirmedField]) => `${field}不能和上面${confirmedField}匹配`,
credit_card: (field) => `${field}的格式错误`,
date_between: (field, [min, max]) => `${field}必须在${min}和${max}之间`,
date_format: (field, [format]) => `${field}必须符合${format}格式`,
decimal: (field, [decimals = '*'] = []) => `${field}必须是数字，且能够保留${decimals === '*' ? '' : decimals}位小数`,
digits: (field, [length]) => `${field}必须是数字，且精确到${length}位数`,
dimensions: (field, [width, height]) => `${field}必须在${width}像素与${height}像素之间`,
email: (field) => `${field}不是一个有效的邮箱`,
excluded: (field) => `${field}不是一个有效值`,
ext: (field) => `${field}不是一个有效的文件`,
image: (field) => `${field}不是一张有效的图片`,
included: (field) => `${field}不是一个有效值`,
integer: (field) => `${field}必须是整数`,
ip: (field) => `${field}不是一个有效的地址`,
length: (field, [length, max]) => {
if (max) {
return `${field}长度必须在${length}到${max}之间`
}
return `${field}长度必须为${length}`
},
max: (field, [length]) => `${field}不能超过${length}个字符`,
max_value: (field, [max]) => `${field}必须小于或等于${max}`,
mimes: (field) => `${field}不是一个有效的文件类型`,
min: (field, [length]) => `${field}必须至少有${length}个字符`,
min_value: (field, [min]) => `${field}必须大于或等于${min}`,
numeric: (field) => `${field}只能包含数字字符`,
regex: (field) => `${field}格式无效`,
required: (field) => `${field}是必须的`,
size: (field, [size]) => `${field}必须小于${formatFileSize(size)}`,
url: (field) => `${field}不是一个有效的url`
}
}
})
内容是差不多的，用代码的话更直观一点。
四、HTML代码示例
{{ errors.first('name') }}{{ errors.first('mobile') }}
name：必须要添加，不然无法关联data-vv-as：错误提示的中文名称；例：账号不能为空，手机号不能为空。v-validate：验证规则，多个用 ‘|’ 分开。alpha_dash 就是中文规则，能够包含字母数字字符、破折号和下划线的意思。
错误提示span里的内容为固定写法，errors.has有无错误显示，errors.first提示错误信息
五、自定义验证规则
这里放了一些例子提供参考
//手机的验证。
VeeValidate.Validator.extend("mobile", {
getMessage: () => `请输入正确的手机号码`,
validate: value =>
value.length === 11 &&
/^(((13[0-9]{1})|(14[57]{1})|(15[012356789]{1})|(17[03678]{1})|(18[0-9]{1})|(19[89]{1})|(16[6]{1}))+\d{8})$/.test(
value
)
});
//身份证的验证。
VeeValidate.Validator.extend("idCard", {
getMessage: () => `请输入正确的身份证号码`,
validate: value =>
/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/.test(
value
)
});
//邮箱的验证。
VeeValidate.Validator.extend("Email", {
getMessage: () => `请输入正确的邮箱地址`,
validate: value =>
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(
value
)
});
//邮箱的验证。
VeeValidate.Validator.extend("fax", {
getMessage: () => `请输入正确的办公电话`,
validate: value =>
/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/.test(
value
)
});
VeeValidate.Validator.extend("intOrDe", {
getMessage: () => `请输入正确的值，整数或小数，小数后只能二位`,
validate: value =>
/^(-)?\d+(\.\d{1,2})?$/.test(
value
)
});
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。