プロジェクトの実戦-Vantの基礎の上で実際に検証の枠組みを追加します

4604 ワード

VantはVueベースのモバイルUIフレームワークで、素晴らしい製品があります.
UIのデザインがきれいで、ソースコードの構造もはっきりしているので、プラグインの位置付けも明確で、実戦の過程での使用体験がいいことが重要です.最近のプロジェクトではVantモバイル側のベースUIフレームワークとして使用されているが、実際には他のフレームワークと異なる点が発見されている.たとえば、フォーム検証は内蔵されていません.次に、検証フレームワークを実現するためのアイデアを共有します.
------つまらない話の区切り線------
需要の分析
私たちが探しているプラグインは主に以下の問題を解決することができます.

中国語対応

UIフレームワーク適応

パケット検証

動的検証(データ動的、ルール動的)

ネット上でいくつかのフレームワークを検索して、2つを推薦しました(公式にも押しています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に基づく検証フレームワークの問題が解決され,楽しくプレイフォーム検証が可能となる.

vueコンポーネントのtableテーブル

クライアントhtmlファイルキャッシュの無効化