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
jquery.validate 也是不错的选择，这是后话了，本文就只介绍 VeeValidate 在 Vue 中的实践。
官网： https://baianat.github.io/vee-validate/
基本示例（官方说明）
您所需要的只是将v-validate指令添加到要验证的输入中，并确保您的输入具有name用于生成错误消息的属性。
然后，传递给指令一个rules字符串，其中包含由管道’ |’ 分隔的验证规则列表。对于以下示例，验证规则很简单。使用required表明，该领域是必需的，email以表明该字段必须为电子邮件。要结合这两个规则，我们指定字符串值required|email的v-validate表达式的值。
要显示错误消息，我们只需使用该errors.first方法来获取为该字段生成的第一个错误：
{{ errors.first(‘email’) }}
1、安装（个人博客说明）
npm install vee-validate --save
2、配置和使用
我是使用 npm 安装，注入依赖。这边配置使用主要是3个文件。
=====validate.js ：自己创建一个文件，单独将关于表单验证的代码抽离出来，从 node_modules 中引入 VeeValidate，配置相关项 =====main.js ：vue 主文件入口，引入validate.js =====form.vue ：表单组件
首先附上validate.js中的代码：
import Vue from ‘vue’
import VeeValidate, {Validator} from ‘vee-validate’
import zh from ‘vee-validate/dist/locale/zh_CN’;//引入中文文件
// 配置中文
Validator.addLocale(zh);
const config = {
locale: ‘zh_CN’
};
Vue.use(VeeValidate,config);
// 自定义validate
const dictionary = {
zh_CN: {
messages: {
email: () => ‘请输入正确的邮箱格式’,
required: ( field )=> “请输入” + field
},
attributes:{
email:‘邮箱’,
password:‘密码’,
name: ‘账号’,
phone: ‘手机’
}
}
};
Validator.updateDictionary(dictionary);
Validator.extend(‘phone’, {
messages: {
zh_CN:field => field + ‘必须是11位手机号码’,
},
validate: value => {
return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
}
});
从上往下分别是:
1、引入表单验证依赖文件，并且引入的是支持中文错误提示的文件。
import Vue from ‘vue’
import VeeValidate, {Validator} from ‘vee-validate’
import zh from ‘vee-validate/dist/locale/zh_CN’;//引入中文文件
2、进行中文错误提示的配置。
// 配置中文
Validator.addLocale(zh);
const config = {
locale: ‘zh_CN’
};
Vue.use(VeeValidate,config);
3、如果你想自定义表单验证的提示语，不配置有默认。
// 自定义validate
const dictionary = {
zh_CN: {
messages: {
email: () => ‘请输入正确的邮箱格式’,
required: ( field )=> “请输入” + field
},
attributes:{
email:‘邮箱’,
password:‘密码’,
name: ‘账号’,
phone: ‘手机’
}
}
};
Validator.updateDictionary(dictionary);
message ： 提示语。 attributes： 就是 filed。
4、扩展自定义的验证，比如这边自定义了电话的表单验证。
Validator.extend(‘phone’, {
messages: {
zh_CN:field => field + ‘必须是11位手机号码’,
},
validate: value => {
return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
}
});
main.js中的代码：
import ‘./static/js/validate.js’
只需要将 validate.js 引入主文件入口就完成了铺路工作，现在就可以开始写表单界面了。
form.vue 组件中的代码：