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

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没有内置验证框架，但提供了错误的样式。

<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 的验证框架问题就得以解决了，可以愉快的玩耍表单验证了。