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

(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )

Vant 一套基于Vue的移动端UI框架，有赞出品。

因为UI设计的够漂亮，源码结构也比较清晰，插件定位也比较明确，重要是实战过程中的使用体验不错。在最近的项目当中就使用 Vant 作为移动端的基础UI框架，但在实践过程中发现该框架和其他框架有不一样的地方。例如它不内置表单验证，接下来，我把自己实现验证框架的思路分享出来。

分析需求

我们找的插件主要能解决以下问题

支持中文
适应UI框架
分组验证
动态验证（数据动态，规则动态）

去网络上搜索了一些框架，推荐两款（在官方也有推https://cn.vuejs.org/v2/cookbook/form-validation.html ）

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)
Vue.use(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 " " + (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 === '*' "htmlcode">

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


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

上一篇：JavaScript 中 JSON.parse 函数和 JSON.stringify 函数
下一篇：在Vant的基础上封装下拉日期控件的代码示例