表单验证封装

目的： 对表单元素进行字段验证并返回错误处理数据

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;
  }
}