表单验证封装

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

1: 定义验证字段结构,验证数据类,value表示须要验证的字段的值,id表示验证的字段key,rules里面定义规则数组,type表示类型,errmessge表示失败错误提示i,value表示验证规则。java

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: 循环处理验证数据ui

    2: 循环处理每一个验证数据项的验证规则this

    3: 定义type类型处理函数orm

优化: 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;
  }
}