在Vant的基础上实现添加表单验证框架的方法示例

在Vant的基础上实现添加表单验证框架的⽅法⽰例
⼀套基于Vue的移动端UI框架，有赞出品。

因为UI设计的够漂亮，源码结构也⽐较清晰，插件定位也⽐较明确，重要是实战过程中的使⽤体验不错。

在最近的项⽬当中就使⽤ Vant 作为移动端的基础UI框架，但在实践过程中发现该框架和其他框架有不⼀样的地⽅。

例如它不内置表单验证，接下来，我把⾃⼰实现验证框架的思路分享出来。

分析需求
我们找的插件主要能解决以下问题
⽀持中⽂
适应UI框架
分组验证
动态验证（数据动态，规则动态）
vuelidate
vee-validate
我的项⽬⾥使⽤的是vee-validate
解决问题
安装及⽀持中⽂
npm install vee-validate --save
import VeeValidate, { Validator } from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN';
Validator.localize('zh_CN', zh_CN)
e(VeeValidate)
中⽂问题可以解决，但是遇到个很恶⼼的问题，这样的错误提⽰会变成 title不能为空这样的提⽰，实际展⽰效果是不好的。

所以这个需要重构下，⾃⼰来实现错误提⽰的内容
const formatFileSize = function (size) {
let units = ['Byte', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
let threshold = 1024;
size = Number(size) * threshold;
let i = 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`
}
})
e(VeeValidate)
适应UI框架
虽然Vant没有内置验证框架，但提供了错误的样式。

<van-field
:error="..."
:error-message="..."
/>
⽤ vee-validate 可以这样解决
<van-field
...
name="title"
v-validate="'required|max:20'"
:error="errors.has('title')"
:error-message="errors.first('title')"
/>
this.$validator.validateAll().then((result) => {
if(result){
// ...
}
})
分组验证
<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){
// ...
}
})
如此，基于 Vant 的验证框架问题就得以解决了，可以愉快的玩耍表单验证了。

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。