表單驗證封裝

目的： 對錶單元素進行字段驗證並返回錯誤處理數據

1： 定義驗證字段結構，驗證數據類，value表示須要驗證的字段的值，id表示驗證的字段key，rules裏面定義規則數組，type表示類型，errmessge表示失敗錯誤提示i，value表示驗證規則。

type： 提供驗空，長度，最大長度，最小長度判斷，另外還可自定義驗證規則，自定義規則爲正則表達式

代碼以下：

export class VerifyData {
  value = ''; // 驗證數據
  id = ''; // 驗證字段
  rules: VerifyRule[] = []; // 驗證規則
}

export class VerifyRule {
  type = ''; // 驗證規則類型 isRequired 驗空 length 長度判斷 minLength 最小長度 maxLength 最大長度 customRule 自定義規則（正則表達式）
  errMessage = ''; // 錯誤信息 
  value: any = null; // 驗證規則
}

2：定義驗證結果返回類型，字段包括id，驗證字段，message，錯誤數據，代碼以下：

export class ErrorVerify {
  id = ''; // 驗證字段
  message: string[] = []; // 錯誤信息
}

3：定義一個單例對象，實現驗證功能。

思路： 1： 循環處理驗證數據

　　　 2： 循環處理每一個驗證數據項的驗證規則

　　　 3： 定義type類型處理函數

優化： 1： 一檢測到錯誤當即退出函數

最終代碼以下：

export const FormDriver{
　/*
  *  表單驗證
  *  verifiesData : 驗證數據對象
  *  once: 爲true只返回一條錯誤信息 選填
  * */
  checkForm(verifiesData: VerifyData[], once?: boolean): ErrorVerify[] {
    const result: ErrorVerify[] = [];
    if (!verifiesData) {
      return result;
    }
    verifiesData.some(item => {
      const p = {
        id: item.id,
        message: []
      };
      p.message = this.rulesHandle(item, once);
      if (p.message.length > 0) {
        result.push(p);
      }
      if (result.length > 0 && once) {
        return true;
      }
    });
    return result;
  },
  /*
  * 驗證規則並獲取輸出錯誤信息
  * */
  rulesHandle(verifyData: VerifyData, once?: boolean): string[] {
    const result: string[] = [];
    verifyData.rules.some(rule => {
      const verifyResult = this.ruleTypeCheckHandle(verifyData.value, rule);
      if (verifyResult) {
        result.push(verifyResult);
      }
      if (result.length > 0 && once) {
        return true;
      }
    });
    return result;
  },
  /*
  * 驗證規則處理
  * */
  ruleTypeCheckHandle(value: string, rule: VerifyRule): string {
    let result = null;
    switch (String(rule.type)) {
      case 'isRequired':
        if (!value.trim()) {
          result = rule.errMessage;
        }
        break;
      case 'length':
        if (String(value).trim().length !== Number(rule.value)) {
          result = rule.errMessage;
        }
        break;
      case 'minLength':
        if (String(value).trim().length < Number(rule.value)) {
          result = rule.errMessage;
        }
        break;
      case 'maxLength':
        if (String(value).trim().length > Number(rule.value)) {
          result = rule.errMessage;
        }
        break;
      case 'customRule':
        if (!rule.value.test(value)) {
          result = rule.errMessage;
        }
        break;
    }
    return result;
  }
}