使用mixins，實現elementUI表單的全局驗證

時間 2019-12-04

標籤使用 mixins 實現 elementui 表單全局驗證欄目 HTML 简体版

原文原文鏈接

使用ElementUi搭建框架的時候，你們應該都有考慮過怎麼作全局驗證，畢竟複製粘貼什麼的是最煩了，這裏分享下我的的解決方法。

驗證規則

分析規則

通常驗證規則，主要是是否必填，不爲空，以及參數類型的驗證。
基於這個條件，咱們開始找找思路, 單個字段的驗證是這樣的：vue

name: {
   required: 是否必填,
    validator: 自定義規則,
    message: 失敗提示消息(非自定義時觸發),
    trigger: 觸發方式
}

循環實現

固定的規則。當一個東西固定以後，那必然是能夠重複使用的，而且能夠快速生成，咱們能夠用循環來實現它。
可是用循環來實現，咱們則須要一個數據規則。git

定義數據規則

分析下須要的字段，大概就是如下幾種，其餘的能夠根據自身的需求去增長：github

驗證的字段名 label
驗證的值 value
驗證的類型 type
是否必填 required
自定義規則 rules

那最終咱們獲得的是這樣一個字段配置列表:微信

fieldList: [
          {label: '帳號', value: 'account', type: 'input', required: true},
          {label: '密碼', value: 'password', type: 'password', required: true},
          {label: '暱稱', value: 'name', type: 'input', required: true},
          {label: '性別', value: 'sex', type: 'select', list: 'sexList', required: true},
          {label: '頭像', value: 'avatar', type: 'input'},
          {label: '手機號碼', value: 'phone', type: 'input'},
          {label: '微信', value: 'wechat', type: 'input'},
          {label: 'QQ', value: 'qq', type: 'input'},
          {label: '郵箱', value: 'email', type: 'input'},
          {label: '狀態', value: 'status', type: 'select', list: 'statusList', required: true}
        ]

form完整的字段配置建議參考：框架

// 表單相關
      formInfo: {
        ref: null,
        data: {
          id: '', // *惟一ID
          account: '', // *用戶帳號
          password: '', // *用戶密碼
          name: '', // *用戶暱稱
          type: 2, // *用戶類型: 0: 手機註冊 1: 論壇註冊 2: 管理平臺添加
          sex: 0, // *性別: 0:男 1:女
          avatar: '', // 頭像
          phone: '', // 手機號碼
          wechat: '', // 微信
          qq: '', // qq
          email: '', // 郵箱
          status: 1 // *狀態: 0：停用，1：啓用(默認爲1)',
          // create_user: '', // 建立人
          // create_time: '', // 建立時間
          // update_user: '', // 修改人
          // update_time: '' // 修改時間
        },
        fieldList: [
          {label: '帳號', value: 'account', type: 'input', required: true},
          {label: '密碼', value: 'password', type: 'password', required: true},
          {label: '暱稱', value: 'name', type: 'input', required: true},
          {label: '性別', value: 'sex', type: 'select', list: 'sexList', required: true},
          {label: '頭像', value: 'avatar', type: 'input'},
          {label: '手機號碼', value: 'phone', type: 'input'},
          {label: '微信', value: 'wechat', type: 'input'},
          {label: 'QQ', value: 'qq', type: 'input'},
          {label: '郵箱', value: 'email', type: 'input'},
          {label: '狀態', value: 'status', type: 'select', list: 'statusList', required: true}
        ],
        rules: {},
        labelWidth: '120px'
      }

實現驗證方法

循環字段列表，根據type判斷是提示選擇不能爲空，仍是輸入不能爲空
若是字段必填，則根據是否有自定義驗證去生成驗證規則
字段非必填，有自定義規則生成驗證

// 初始化驗證數據
    _initRules (formInfo) {
      const obj = {},
        fieldList = formInfo.fieldList
      // 循環字段列表
      for (let item of fieldList) {
        let type = item.type === 'select' ? '選擇' : '輸入'

        if (item.required) {
          if (item.rules) {
            obj[item.value] = {
              required: item.required,
              validator: item.rules,
              trigger: 'blur'
            }
          } else {
            obj[item.value] = {
              required: item.required,
              message: '請' + type + item.label,
              trigger: 'blur'
            }
          }
        } else if (item.rules) {
          obj[item.value] = {
            validator: item.rules,
            trigger: 'blur'
          }
        }
      }
      formInfo.rules = obj
    }