實現elementUI表單的全局驗證

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

驗證規則

分析規則

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

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

循環實現

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

定義數據規則

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

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

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

fieldList: [
          {label: '帳號', value: 'account', type: 'input', required: true, validator: checkAccount},
          {label: '密碼', value: 'password', type: 'password', required: true, validator: checkPwd},
          {label: '暱稱', value: 'name', type: 'input', required: true},
          {label: '性別', value: 'sex', type: 'select', list: 'sexList', required: true},
          {label: '頭像', value: 'avatar', type: 'slot', className: 'el-form-block'},
          {label: '手機號碼', value: 'phone', type: 'input', validator: checkPhone},
          {label: '微信', value: 'wechat', type: 'input', validator: checkWechat},
          {label: 'QQ', value: 'qq', type: 'input', validator: checkQQ},
          {label: '郵箱', value: 'email', type: 'input', validator: checkEmail},
          {label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block'},
          {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: '', // 郵箱
          desc: '', // 描述
          status: 1 // *狀態: 0：停用，1：啓用(默認爲1)', // create_user: '', // 建立人 // create_time: '', // 建立時間 // update_user: '', // 修改人 // update_time: '' // 修改時間 }, fieldList: [ {label: '帳號', value: 'account', type: 'input', required: true, validator: checkAccount}, {label: '密碼', value: 'password', type: 'password', required: true, validator: checkPwd}, {label: '暱稱', value: 'name', type: 'input', required: true}, {label: '性別', value: 'sex', type: 'select', list: 'sexList', required: true}, {label: '頭像', value: 'avatar', type: 'slot', className: 'el-form-block'}, {label: '手機號碼', value: 'phone', type: 'input', validator: checkPhone}, {label: '微信', value: 'wechat', type: 'input', validator: checkWechat}, {label: 'QQ', value: 'qq', type: 'input', validator: checkQQ}, {label: '郵箱', value: 'email', type: 'input', validator: checkEmail}, {label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block'}, {label: '狀態', value: 'status', type: 'select', list: 'statusList', required: true} ], rules: {}, labelWidth: '120px' } 複製代碼

實現驗證方法

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

export default (fieldList) => {
  const obj = {}
  // 循環字段列表
  for (const item of fieldList) {
    const type = item.type === 'select' ? '選擇' : '輸入'
    if (item.required) {
      if (item.validator) {
        obj[item.value] = {
          required: item.required,
          validator: item.validator,
          trigger: 'blur'
        }
      } else {
        obj[item.value] = {
          required: item.required,
          message: '請' + type + item.label,
          trigger: 'blur'
        }
      }
    } else if (item.validator) {
      obj[item.value] = {
        validator: item.validator,
        trigger: 'blur'
      }
    }
  }
  // formInfo.rules = obj
  return obj
}
複製代碼

使用

結合上面的字段設計，我在頁面上的使用是這樣的，你們能夠根據本身的字段設計去修改，大體實現過程是這樣的, 將初始化規則掛在了全局，Vue.prototype.$initRules

// 初始化驗證
    initRules () {
      const formInfo = this.formInfo
      formInfo.rules = this.$initRules(formInfo.fieldList)
    }
複製代碼

怎麼配置到全局

• 經過mixin配置，而後在頁面中使用
• 配置爲全局方法在頁面中調用
• 掛在到vue實例上，經過this便可訪問(以前使用的是mixin， 如今將方法掛在了this上)

最後

在項目的系統管理模塊中能夠看到示例代碼：

項目地址

項目代碼地址

若是沒有本身的驗證函數，這個或許能夠幫到你:

從0開始，編寫一個驗證函數