項目實戰-在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沒有內置驗證框架，但提供了錯誤的樣式。

  <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 的驗證框架問題就得以解決了，能夠愉快的玩耍表單驗證了。