官网: http://vee-validate.logaretm....
引入:
npm install vee-validate --save
vue代码:
import VeeValidate from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN'; //引入中文包,提示信息可以以中文形式显示
import { Validator } from 'vee-validate';
Validator.addLocale(zh_CN); // 设置提示信息中文方式显示
const config = {
errorBagName: 'errors',
fieldsBagName: 'fields',
delay: 100,
locale: 'zh_CN',
strict: true,
enableAutoClasses: true,
events: 'blur',
inject: true
};
Vue.use(VeeValidate, config); //一般插件都要use一下
config配置信息
插件的一些功能可以自定义,需要编写config,然后Vue.use(VeeValidate, config)来使用
一下为配置信息的意思(可能不全面)
errorBagName: 'erroers'
所有的错误信息都是放在这个里面的,如果名称和页面上的变量名字冲突,需要修改成其他的,当是errors.fist的时候,error就是字符串,当使用error.all()/error.collect()的时候就是数组
fieldsBagName: 'fields'
字段的名称(标志)的对象,将在每个Vue的实例数据注入。如果在页面上使用了ip的验证,那么,可以通过如下获取一个对象:
this.fileds.ip
>> 获取到的对象:
{
dirty :true
invalid:false
pending:false
pristine:false
required:true
touched:true
untouched:false
valid:true
validated:true
}
delay : 100
表示获取输入信息的时间
locale: ‘zh_CN’
验证消息的默认语言。
strict: true
表示没有设置规则的表单不进行验证
classes (不懂)
events: 'blur|input'
默认是input|blur 就是在用户输入和表单失去焦点的时候都进行验证,blue表示失去焦点的时候进行验证
自带规则
after/before
❌
<input v-validate="'required|after: 01/01/2010'" name="日期" type="text" placeholder="填入日期应该在01/01/2010之后">
我理解的是向上面一样写,但是不管我输入什么日期,一直会提醒错误,如果有知道正确写法的朋友,希望能指点下
有朋友提示,可以这样写
<input v-validate="'required|date\_format:DD/MM/YYYY|after: 01/01/2010'" name="日期" type="text" placeholder="填入日期应该在01/01/2010之后">
alpha
<input v-validate="'required|alpha'" name="" type="text" placeholder="只能输入字符串">
alpha_dash
<input v-validate="'required|alpha_dash'" name="" type="text" placeholder="能输入字母数字破折号下划线">
alpha_num
<input v-validate="'required|alpha_num'" name="" type="text" placeholder="能输入字母数字">
alpha_spaces
<input v-validate="'required|alpha_spaces'" name="" type="text" placeholder="能输入字母空格"><br>
between
<input v-validate="'required|between: 1,10'" name="" type="text" placeholder="1-10">
confirmed :一般用于需要再次输入的验证,比如密码的再次输入
<input v-validate="'required|confirmed:123'" name="password" type="text" placeholder="输入的内容要和123相同">
credit_card
<input v-validate="'required|credit_card'" name="password" type="text" placeholder="输入的内容格式是信用卡的号码格式">
date_between
<input v-validate="'required|date_between:10/09/2016, 20/09/2016'" name="日期" type="text" placeholder="输入的日期要在10/09/2016和20/09/2016之间">
date_format
<input type="text" v-validate="'date_format:MM/DD/YYYY'" name="" placeholder="输入的日期格式要是MM/DD/YYYY">
decimal
<input type="text" v-validate="'decimal:2'" name="" placeholder="输入的数字的小数点个数是2">
digits
<input type="text" v-validate="'digits:2'" placeholder="数字长度是两位">
dimensions
<input type="file" v-validate="'dimensions:10,10'" placeholder="上传的图片是10像素到10像素">
<input type="text" v-validate="'date_format:MM/DD/YYYY'" name="" placeholder="输入的日期格式要是MM/DD/YYYY">
ext
<input type="file" v-validate="'ext: zip, png'" placeholder="上传文件后缀名限制为zip和png">
image
<input v-validate="'required|email'" name="email" type="text" placeholder="输入内容为email格式">
in / not_in
<select name="" v-validate="'in:1,3,4'">
<option value="1">One</option>
<option value="2">Invalid</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
ip
<input v-validate="'required|ip'" name="ip" type="text" placeholder="输入内容为ip格式">
max
<input type="text" v-validate="'max:10'" name="" placeholder="字符串最大长度是10,空格也计算在内">
max_value
<input type="text" v-validate="'max_value:100'" placeholder="输入的数字最大为100">
mimes
<input v-validate="'required|mimes:[image/jpeg,image/png]'" name="mimes" type="file” > mimes: [里面可以写文件类型] 如果是写image好像不辨别
min
<input type="text" v-validate="'min:5'" placeholder="输入的字符长度最小为最大为5">
min_value
<input type="text" v-validate="'min_value:5'" placeholder="输入的数字最小为5">
numeric
<input type="text" v-validate="'numeric'" placeholder="输入的数字最小为5">
regex
<input type="text" v-validate="'regex:^([0-9]+)$'" placeholder="regex后面可以写正则表达式,匹配输入的内容">
required
<input v-validate="'required'" name="username" type="text" placeholder="内容必须填写">
size
<input type="file" v-validate="'size:100'" placeholder="上传文件大小限制,必须小于100kb">
url
<input v-validate="'required|url'" name="url" type="text" placeholder="输入内容格式为url">
rules
<input type="text" v-validate="{ rules: { regex: /^([0-9]+)$/, max_value:100 } }" placeholder="使用rules可以组合使用规则">
自定义部分
自定义规则:
Validator.extend('qq', {
messages: {
zh_CN:field => 'qq号码输入不正确'
},
validate: value => {
// 获取输入的value
return /^[1-9][0-9]{4,14}$/.test(value);
}
});
自定义提示信息
const dictionary = {
zh_CN: {
messages: {
email: () => '邮箱格式不正确哦>.<'
}
}
};
Validator.updateDictionary(dictionary);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。