项目实战-在Vant的基础上实添加验证框架

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

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

---------无聊话分隔线---------

分析需求

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

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

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

• 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 ? 0 : Math.floor(Math.log(size) / Math.log(threshold));
    return (((size / Math.pow(threshold, i)).toFixed(2) * 1) + " " + (units[i]));
  }
  const fieldName = '' // 原来的i18n的fieldName会显示绑定的name值，就是英文，实际项目中不需要
  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 的验证框架问题就得以解决了，可以愉快的玩耍表单验证了。