ElementUI多個(gè)子組件表單的校驗(yàn)管理實(shí)現(xiàn)

背景

團(tuán)風(fēng)ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書(shū)合作）期待與您的合作！

公司項(xiàng)目中所用到的前端框架是Vue.js + ElementUI，因?yàn)轫?xiàng)目的業(yè)務(wù)場(chǎng)景中有很多的大表單，但是ElementUI的表單寫(xiě)法對(duì)于表單的拆分和校驗(yàn)其實(shí)并不是很友好。最初的項(xiàng)目為了方便，常常把多個(gè)表單寫(xiě)在一個(gè).vue組件中，這導(dǎo)致單文件的代碼量巨大，邏輯十分復(fù)雜。目前為了維護(hù)方便，表單的拆分就變得十分重要。

現(xiàn)在做了以下的Demo說(shuō)明我們的業(yè)務(wù)場(chǎng)景，父組件是App.vue，該組件中包含了PersonForm.vue和AdsForm.vue這兩個(gè)子組件（在實(shí)際的業(yè)務(wù)場(chǎng)景中，可能多達(dá)10+表單）?！咎峤弧堪粹o在父組件App.vue中，當(dāng)點(diǎn)擊【提交】按鈕后，應(yīng)該分別校驗(yàn)各個(gè)子組件，如果每個(gè)子組件都校驗(yàn)成功后再進(jìn)行提交。

Demo

PersonForm.vue文件

下面的代碼是PersonForm.vue組件，該表單包括姓名、年齡、性別。我們使用了PersonForm這個(gè)類去實(shí)例化組件中的personForm的值。在PersonForm中有個(gè)static方法getRule去獲取校驗(yàn)方法去獲取校驗(yàn)對(duì)象，該校驗(yàn)對(duì)象是ElementUI要求的寫(xiě)法，會(huì)在的rules中定義。

AdsForm.vue文件

下面的代碼是AdsForm.vue組件，該表單包括廣告名和廣告位置。我們使用了AdsForm這個(gè)類去實(shí)例化組件中的adsForm的值。在AdsForm中有個(gè)static方法getRule去獲取校驗(yàn)方法去獲取校驗(yàn)對(duì)象。

validator.js文件

在PersonForm.vue 和 AdsForm.vue中我們導(dǎo)入了validator.js中的校驗(yàn)方法，這些校驗(yàn)方法中封裝了對(duì)表單屬性值的校驗(yàn)規(guī)則。該文件中的方法在實(shí)際項(xiàng)目中，應(yīng)該使用策略模式再封裝一下。Demo中只有4個(gè)方法，就沒(méi)有再封裝來(lái)干擾讀者理解代碼。

// 驗(yàn)證名字
var validateName = (rule, value, callback) => {
 if(!value) {
  callback(new Error('名字不能為空'));
 } else if(/[a-zA-Z]/.test(value)) {
  callback(new Error('請(qǐng)?zhí)顚?xiě)中文名字！'));
 } else {
  callback();
 }
};

// 驗(yàn)證年齡
var validateAge = (rule, value, callback) => {
 const toNumberVal = Number(value);
 if ((typeof value === 'string' && value === '') || (value === null)) {
  callback(new Error('年齡不允許為空'));
 } else if (isNaN(toNumberVal)) {
  callback(new Error('年齡為數(shù)值類型'));
 } else if(!(toNumberVal > 0 && toNumberVal <= 120)) {
  callback(new Error('年齡范圍應(yīng)該大于一歲且小于等于120歲'));
 } else {
  callback();
 }
}

// 驗(yàn)證性別
var validateSex = (rule, value, callback) => {
 if (value === null) {
  callback(new Error('性別不允許為空'));
 } {
  callback();
 }
}

// 驗(yàn)證不為空
var notEmpty = (rule, value, callback) => {
 if (value === '' || value === null || value === undefined) {
  callback(new Error('不允許為空'));
 } else {
  callback();
 }
}

export { 
  validateName, 
  validateAge, 
  validateSex,
  notEmpty,
}

App.vue

App.vue是父組件，當(dāng)點(diǎn)擊【提交】按鈕時(shí)，應(yīng)該調(diào)用其ElmentUI的this.$refs[formName].validate方法去驗(yàn)證各個(gè)子組件中的表單。但是需要注意的是，該方法是一個(gè)異步方法。

所以這里封裝了一個(gè)getFormPromise去生成Promise對(duì)象，并使用Promise.all去并行調(diào)用返回最終的校驗(yàn)結(jié)果數(shù)組。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。