在Vant的基础上实现添加表单验证框架的方法示例
Vant一套基于Vue的移动端UI框架，有赞出品。
因为UI设计的够漂亮，源码结构也比较清晰，插件定位也比较明确，重要是实战过程中的使用体验不错。在最近的项目当中就使用Vant作为移动端的基础UI框架，但在实践过程中发现该框架和其他框架有不一样的地方。例如它不内置表单验证，接下来，我把自己实现验证框架的思路分享出来。
分析需求
我们找的插件主要能解决以下问题
- 支持中文
- 适应UI框架
- 分组验证
- 动态验证（数据动态，规则动态）
去网络上搜索了一些框架，推荐两款（在官方也有推https://cn.vuejs.org/v2/cookbook/form-validation.html）
- vuelidate
- vee-validate
我的项目里使用的是vee-validate
解决问题
安装及支持中文
npminstallvee-validate--save
importVeeValidate,{Validator}from'vee-validate'
importzh_CNfrom'vee-validate/dist/locale/zh_CN';
Validator.localize('zh_CN',zh_CN)
Vue.use(VeeValidate)
中文问题可以解决，但是遇到个很恶心的问题，这样的错误提示会变成title不能为空这样的提示，实际展示效果是不好的。
所以这个需要重构下，自己来实现错误提示的内容
constformatFileSize=function(size){
letunits=['Byte','KB','MB','GB','TB','PB','EB','ZB','YB'];
letthreshold=1024;
size=Number(size)*threshold;
leti=size===0?0:Math.floor(Math.log(size)/Math.log(threshold));
return(((size/Math.pow(threshold,i)).toFixed(2)*1)+""+(units[i]));
}
Validator.localize('zh_CN',{
name:'zh_CN',
attributes:{}
messages:{
_default:()=>`${fieldName}无效`,
after:(field,[target])=>`${fieldName}必须在${target}之后`,
alpha_dash:()=>`${fieldName}能够包含字母数字字符、破折号和下划线`,
alpha_num:()=>`${fieldName}只能包含字母数字字符`,
alpha_spaces:()=>`${fieldName}只能包含字母字符和空格`,
alpha:()=>`${fieldName}只能包含字母字符`,
before:(field,[target])=>`${fieldName}必须在${target}之前`,
between:(field,[min,max])=>`${fieldName}必须在${min}与${max}之间`,
confirmed:(field,[confirmedField])=>`${fieldName}不能和${confirmedField}匹配`,
credit_card:()=>`${fieldName}格式错误`,
date_between:(field,[min,max])=>`${fieldName}必须在${min}和${max}之间`,
date_format:(field,[format])=>`${fieldName}必须符合${format}格式`,
decimal:(field,[decimals='*']=[])=>`${fieldName}必须是数字，且能够保留${decimals==='*'?'':decimals}位小数`,
digits:(field,[length])=>`${fieldName}必须是数字，且精确到${length}位数`,
dimensions:(field,[width,height])=>`${fieldName}必须在${width}像素与${height}像素之间`,
email:()=>`${fieldName}不是一个有效的邮箱`,
ext:()=>`${fieldName}不是一个有效的文件`,
image:()=>`${fieldName}不是一张有效的图片`,
included:()=>`${fieldName}不是一个有效值`,
integer:()=>`${fieldName}必须是整数`,
ip:()=>`${fieldName}不是一个有效的地址`,
length:(field,[length,max])=>{
if(max){
return`${fieldName}长度必须在${length}到${max}之间`
}
return`${fieldName}长度必须为${length}`
},
max:(field,[length])=>`${fieldName}不能超过${length}个字符`,
max_value:(field,[max])=>`${fieldName}必须小于或等于${max}`,
mimes:()=>`${fieldName}不是一个有效的文件类型`,
min:(field,[length])=>`${fieldName}必须至少有${length}个字符`,
min_value:(field,[min])=>`${fieldName}必须大于或等于${min}`,
excluded:()=>`${fieldName}不是一个有效值`,
numeric:()=>`${fieldName}只能包含数字字符`,
regex:()=>`${fieldName}格式无效`,
required:()=>`${fieldName}不能为空`,
size:(field,[size])=>`${fieldName}必须小于${formatFileSize(size)}`,
url:()=>`${fieldName}不是一个有效的url`
}
})
Vue.use(VeeValidate)
适应UI框架
虽然Vant没有内置验证框架，但提供了错误的样式。
用vee-validate可以这样解决
this.$validator.validateAll().then((result)=>{
if(result){
//...
}
})
分组验证
this.$validator.validateAll('group-1').then((result)=>{
if(result){
//...
}
})
如此，基于Vant的验证框架问题就得以解决了，可以愉快的玩耍表单验证了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。