vee-validate 总结
一、安装
npm install vee-validate@"<3.0.0" --save
二、引用
import Vue from 'vue'; import VeeValidate from 'vee-validate'; Vue.use(VeeValidate);
三、config配置信息
插件的一些功能可以自定义，需要编写config，然后Vue.use(VeeValidate, config)来使用
- errorBagName： 'errors'
所有的错误信息都是放在这个里面的，如果名称和页面上的变量名字冲突，需要修改成其他的，当是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 }
- locale： 'zh_CN'
验证消息的默认语言。
-
strict: true
表示没有设置规则的表单不进行验证。
-
events: 'blur|input'
默认是input|blur 就是在用户输入和表单失去焦点的时候都进行验证，blur表示失去焦点的时候进行验证。
四、内置的校验规则
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
五、关于errors
errors是组件内置的一个数据模型，用来存储和处理错误信息，可以调用以下方法：
errors.first('field') - 获取关于当前field的第一个错误信息
collect('field') - 获取关于当前field的所有错误信息(list)
has('field') - 当前filed是否有错误(true/false)
all() - 当前表单所有错误(list)
any() - 当前表单是否有任何错误(true/false)
add(String field, String msg) - 添加错误
clear() - 清除错误
count() - 错误数量
remove(String field) - 清除指定filed的所有错误
六、自定义校验规则
import { Validator } from 'vee-validate';
Validator.extend('mobile', {
messages: {
zh_CN:field => `${field}必须是11位手机号码`,
},
validate: value => {
return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
}
});
七、自定义多个错误提示
<template>
<div>
<input v-model="form.username" name="username" placeholder="请输入昵称" v-validate="'required|min:3|max:10|qq'" />
<button @click="onSubmit"></button>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: ''
},
// 自定义多个错误提示
validate: {
custom: {
username: {
required: () => '昵称不得为空',
min: () => '不得小于3个字符',
max: () => '不得大于10个字符',
}
},
}
}
},
mounted() {
this.$validator.localize('zh_CN', validate);
// 拓展的验证规则（组件内写法）
this.$validator.extend('qq', {
getMessage: field => 'qq手机号有误',
validate: value => {
return /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
}
})
},
methods: {
// 当用户点击按钮校验时
onSubmit() {
this.$validator.validate().then((valid) => {
console.log(valid); //true验证通过
console.log(this.errors);
console.log(this.errors.items[0].msg); //在弹出层中要显示的第一个错误
})
}
}
}
</script>
八、拓展
this.$validator.validateAll(); // 表单整体校验 this.$validator.validate('field'); // 校验单个字段 this.$validator.errors.clear(); // 清除错误
九、适应ui框架
虽然vant没有内置验证框架，但提供了错误的样式。
<van-field label="姓名" :error="errors.has('Name')" :error-message="errors.first('Name')" v-model="formInfo.Name" name="Name" v-validate="'required|max:5'" data-vv-as="姓名" />
- error：是否将输入内容标红
- error-message：底部错误提示文案，为空时不展示
分组验证
<van-field name="title" data-vv-scope="group-1" v-validate="'required|max:20'" :error="errors.has('group-1.title')" :error-message="errors.first('group-1.title')" />
this.$validator.validateall('group-1').then((result) => { if(result){ // ... } })
