vue+element表單校驗封裝

vue+element ui技術棧的小伙伴們，在平時項目里，特別是OA項目，會大量用到表單以及表單校驗。經常會處理一些必填項，對它們是否有值的判斷顯得有些繁瑣和臃腫，本文將封裝方法，解決該問題。

最近業務中頻繁增加必填項，之前的常規做法就是在提交、修改或者其他操作之前，判斷必填項是否填寫，做個攔截：

 

 在每一個操作之前加上這些必填項的驗證，如果有少量的必填項，可以這樣處理，但是有大量必填項的時候，代碼就會顯得非常冗余。

現在嘗試將抽出來形成方法，在提交、修改等操作之前調用該方法，但是也會遇到一些問題。比如在一些特定條件下，頁面上並不會顯示某些必填項，這時候你還需要將這些特定條件再寫到該方法中。。。久而久之又顯得很亂了。

在element ui文檔中觸發校驗用的：this.$refs[formName].validate()， 不妨打印一下this.$refs[formName]有哪些屬性：

 

 圖中的model是標簽<el-form>上綁定的:model，rules是<el-form>綁定的:rules，validate()是校驗方法，fields是？

繼續點開fields，發現是四個vue組件實例

 

 此時的頁面：

 

 正好也是四個必填項（該頁面有十幾個必填項（如下圖），在該條件下只顯示4個）

將fields一個個點開（每一個vue組件實例中的$el鼠標懸浮上去，會指向頁面相關dom，也正好對應四個必填項），看看它們之間的區別：

第一個【審判長】：

 后面幾個：

 

 可以得出結論，第一個是驗證通過的，它的validateState："success"，validateMessage: ""，后面幾個驗證不通過的：validateState: "error"，validateMessage: "請輸入法官助理" / validateMessage: "請輸入法書記員" / validateMessage: "請輸入審判員"。

validateState是驗證是否通過，validateMessage就是rules中校驗信息的message。

因此，我們可以用fields數組來檢查當前表單中的必填項是否填寫，而不用去關心那些在特定條件下不需要的必填項！

封裝方法：

/**
 * 
 * @param vm $refs.formName
 * @returns {boolean}
 */
export function formValidate(vm) {
  vm.validate();
  let validateList = vm.fields.map(_vm => ({
    validateState:_vm.validateState,
    validateMessage: _vm.validateMessage
  }));
  if(validateList.find(item=>item.validateState == 'error')){
    vm.$message.error(validateList.find(item=>item.validateState == 'error').validateMessage)
    return false
  }
  return true
}

頁面調用：

// 提交表單前校驗必填項
submit(){
  if(!this.$commonUtils.formValidate(this.$refs.submission))return;  
  ...  // 略
}

至此，每次增加必填項的時候，只需要在頁面(<el-form-item>)聲明prop，在rules中增加規則，就不用做其他修改，都交給上面封裝的方法~

 

腳踏實地行，海闊天空飛~