背景

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

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

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

Demo

PersonForm.vue文件

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

AdsForm.vue文件

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

validator.js文件

在PersonForm.vue 和 AdsForm.vue中我們導入了validator.js中的校驗方法，這些校驗方法中封裝了對表單屬性值的校驗規(guī)則。該文件中的方法在實際項目中，應該使用策略模式再封裝一下。Demo中只有4個方法，就沒有再封裝來干擾讀者理解代碼。

// 驗證名字
var validateName = (rule, value, callback) => {
 if(!value) {
  callback(new Error('名字不能為空'));
 } else if(/[a-zA-Z]/.test(value)) {
  callback(new Error('請?zhí)顚懼形拿郑?));
 } else {
  callback();
 }
};

// 驗證年齡
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('年齡為數值類型'));
 } else if(!(toNumberVal > 0 && toNumberVal <= 120)) {
  callback(new Error('年齡范圍應該大于一歲且小于等于120歲'));
 } else {
  callback();
 }
}

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

// 驗證不為空
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是父組件，當點擊【提交】按鈕時，應該調用其ElmentUI的this.$refs[formName].validate方法去驗證各個子組件中的表單。但是需要注意的是，該方法是一個異步方法。

所以這里封裝了一個getFormPromise去生成Promise對象，并使用Promise.all去并行調用返回最終的校驗結果數組。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯。