欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-04 17:54:03
vant 一套基于vue的移动端ui框架,有赞出品。 因为ui设计的够漂亮,源码结构也比较清晰,插件定位也比较明确,重要是实战过程中的使用体验不错。在最近的项目当中就...

vant 一套基于vue的移动端ui框架,有赞出品。

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

分析需求

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

  • 支持中文
  • 适应ui框架
  • 分组验证
  • 动态验证(数据动态,规则动态)

去网络上搜索了一些框架,推荐两款(在官方也有推 )


我的项目里使用的是 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 ? 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没有内置验证框架,但提供了错误的样式。

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

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