快捷導(dǎo)航

實(shí)現(xiàn)elementUI表單的全局驗(yàn)證的方法步驟

更新時(shí)間：2019年04月29日 09:39:58 投稿：zx

這篇文章主要介紹了實(shí)現(xiàn)elementUI表單的全局驗(yàn)證的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

使用ElementUi搭建框架的時(shí)候，大家應(yīng)該都有考慮過(guò)怎么做全局驗(yàn)證，畢竟復(fù)制粘貼什么的是最煩了，這里分享下個(gè)人的解決方法。

驗(yàn)證規(guī)則

分析規(guī)則

一般驗(yàn)證規(guī)則，主要是是否必填，不為空，以及參數(shù)類型的驗(yàn)證。基于這個(gè)條件，我們開(kāi)始找找思路, 單個(gè)字段的驗(yàn)證是這樣的：

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

循環(huán)實(shí)現(xiàn)

固定的規(guī)則。當(dāng)一個(gè)東西固定之后，那必然是可以重復(fù)使用的，并且可以快速生成，我們可以用循環(huán)來(lái)實(shí)現(xiàn)它。但是用循環(huán)來(lái)實(shí)現(xiàn)，我們則需要一個(gè)數(shù)據(jù)規(guī)則。

定義數(shù)據(jù)規(guī)則

分析下需要的字段，大概就是以下幾種，其他的可以根據(jù)自身的需求去增加：

驗(yàn)證的字段名 label
驗(yàn)證的值 value
驗(yàn)證的類型 type
是否必填 required
自定義規(guī)則 validator

那最終我們得到的是這樣一個(gè)字段配置列表:

fieldList: [
   {label: '賬號(hào)', 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: '手機(jī)號(hào)碼', 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: '狀態(tài)', value: 'status', type: 'select', list: 'statusList', required: true}
  ]

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

  formInfo: {
  ref: null,
  data: {
   id: '', // *唯一ID
   account: '', // *用戶賬號(hào)
   password: '', // *用戶密碼
   name: '', // *用戶昵稱
   type: 2, // *用戶類型: 0: 手機(jī)注冊(cè) 1: 論壇注冊(cè) 2: 管理平臺(tái)添加
   sex: 0, // *性別: 0:男 1:女
   avatar: '', // 頭像
   phone: '', // 手機(jī)號(hào)碼
   wechat: '', // 微信
   qq: '', // qq
   email: '', // 郵箱
   desc: '', // 描述
   status: 1 // *狀態(tài): 0：停用，1：?jiǎn)⒂?默認(rèn)為1)',
   // create_user: '', // 創(chuàng)建人
   // create_time: '', // 創(chuàng)建時(shí)間
   // update_user: '', // 修改人
   // update_time: '' // 修改時(shí)間
  },
  fieldList: [
   {label: '賬號(hào)', 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: '手機(jī)號(hào)碼', 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: '狀態(tài)', value: 'status', type: 'select', list: 'statusList', required: true}
  ],
  rules: {},
  labelWidth: '120px'
  }

實(shí)現(xiàn)驗(yàn)證方法

一: 循環(huán)字段列表，根據(jù)type判斷是提示選擇不能為空，還是輸入不能為空
二：如果字段必填，則根據(jù)是否有自定義驗(yàn)證去生成驗(yàn)證規(guī)則
三: 字段非必填，有自定義規(guī)則生成驗(yàn)證

 // 初始化驗(yàn)證數(shù)據(jù)
 _initValidate (formInfo) {
  const obj = {},
  fieldList = formInfo.fieldList
  // 循環(huán)字段列表
  for (let item of fieldList) {
  let 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: '請(qǐng)' + type + item.label,
    trigger: 'blur'
   }
   }
  } else if (item.validator) {
   obj[item.value] = {
   validator: item.validator,
   trigger: 'blur'
   }
  }
  }
  formInfo.rules = obj
 }

使用

結(jié)合上面的字段設(shè)計(jì)，我在頁(yè)面上的使用是這樣的，大家可以根據(jù)自己的字段設(shè)計(jì)去修改，大致實(shí)現(xiàn)過(guò)程是這樣的

// mixin中的方法, 初始化字段驗(yàn)證規(guī)則
this._initValidate(this.formInfo)

怎么配置到全局

通過(guò)mixin配置，然后在頁(yè)面中使用(個(gè)人使用的是mixin)
配置為全局方法在頁(yè)面中調(diào)用
掛在到vue實(shí)例上，通過(guò)this即可訪問(wèn)

mixins例子

export default {
 data () {
 /**
  * 頁(yè)面上的可復(fù)用的驗(yàn)證規(guī)則
  */
 // 驗(yàn)證號(hào)碼格式
 const CHECK_PHONE = (rule, value, callback) => {
  let check = this.$validate({label: '號(hào)碼', value, rules: ['phone']})
  if (!check.result) {
  callback(new Error(check.message))
  } else {
  callback()
  }
 }
 // 驗(yàn)證號(hào)碼格式以及不能為空
 const CHECK_PHONE_NOTNULL = (rule, value, callback) => {
  let check = this.$validate({label: '號(hào)碼', value, rules: ['notnull', 'phone']})
  if (!check.result) {
  callback(new Error(check.message))
  } else {
  callback()
  }
 }
 // 檢測(cè)郵箱格式
 const CHECK_EMAIL = (rule, value, callback) => {
  let check = this.$validate({label: '郵箱', value, rules: ['email']})
  if (!check.result) {
  callback(new Error(check.message))
  } else {
  callback()
  }
 }
 // 檢測(cè)郵箱格式以及不能為空
 const CHECK_EMAIL_NOTNULL = (rule, value, callback) => {
  let check = this.$validate({label: '郵箱', value, rules: ['notnull', 'email']})
  if (!check.result) {
  callback(new Error(check.message))
  } else {
  callback()
  }
 }
 return {
  CHECK_PHONE,
  CHECK_PHONE_NOTNULL,
  CHECK_EMAIL,
  CHECK_EMAIL_NOTNULL
 }
 },
 methods: {
 // 初始化驗(yàn)證數(shù)據(jù)
 _initValidate (formInfo) {
  const obj = {},
  fieldList = formInfo.fieldList
  // 循環(huán)字段列表
  for (let item of fieldList) {
  let 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: '請(qǐng)' + type + item.label,
    trigger: 'blur'
   }
   }
  } else if (item.validator) {
   obj[item.value] = {
   validator: item.validator,
   trigger: 'blur'
   }
  }
  }
  formInfo.rules = obj
 }
 }
}

最后

在項(xiàng)目的系統(tǒng)管理模塊中可以看到示例代碼：

項(xiàng)目地址

項(xiàng)目代碼地址

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: