js 创建简单的表单同步验证器

SyncValidate

declare const uni: any;

export interface SyncValidateOpt {
  [key: string]: SyncValidateFunc[];
}

export interface SyncValidateFunc {
  (input: string | number): string | undefined;
}

/**
 * 同步验证器
 */
export class SyncValidate {
  constructor(public readonly options: SyncValidateOpt) {}

  /**
   * 验证一个
   *
   * check({key: value})
   * @param {Object} keyVal
   */
  check(keyVal: { [key: string]: string | number }): boolean {
    const keys = Object.keys(keyVal);
    if (!keys.length) {
      throw new Error("至少的验证一个.");
    }

    // 只验证一个
    const key = keys[0];
    const val = keyVal[key];

    if (!this.options.hasOwnProperty(key)) {
      throw new Error(`没有设置[${key}]的验证器.`);
    }

    for (let v of this.options[key]) {
      const errorMessage = v(val);
      if (errorMessage) {
        if (
          this.validateErrorListener &&
          typeof this.validateErrorListener === "function"
        ) {
          this.validateErrorListener(errorMessage);
        } else {
          SyncValidate.validateErrorListener(errorMessage);
        }
        // 验证失败立即返回
        return false;
      }
    }

    // 验证ok返回true
    return true;
  }

  /**
   * 验证多个

   * @param keysVals
   */
  checkAll(keysVals: { [key: string]: string | number }): boolean {
    for (let key in keysVals) {
      if (this.check({ [key]: keysVals[key] }) === false) {
        return false;
      }
    }
    return true;
  }

  // 默认的验证错误时的回调函数
  static validateErrorListener(errorMessage: string) {
    uni.showToast({
      icon: "none",
      title: errorMessage,
      duration: 1500,
    });
  }

  private validateErrorListener?: (errorMessage: string) => void;
  // 添加验证错误时的回调函数
  addValidateErrorListener(
    validateErrorListener: (errorMessage: string) => void
  ) {
    this.validateErrorListener = validateErrorListener;
  }

  // 必填
  static required(msg: string): SyncValidateFunc {
    return (input) => {
      if (!input) return msg;
    };
  }

  // 最小长度
  static minLength(len: number, msg: string): SyncValidateFunc {
    return (input) => {
      if (typeof input === "string" && input.length < len) return msg;
    };
  }

  // 最大长度
  static maxLength(len: number, msg: string): SyncValidateFunc {
    return (input) => {
      if (typeof input === "string" && input.length > len) return msg;
    };
  }

  // 简单的验证手机号
  static phone(msg: string, exp?: RegExp): SyncValidateFunc {
    const phoneExp =
      exp ??
      /^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;
    return (input) => {
      if (typeof input === "string" && !input.match(phoneExp)) {
        return msg;
      }
    };
  }

  // 简单的判断相等
  static eql(data: any, msg: string): SyncValidateFunc {
    return (input) => {
      if (input !== data) return msg;
    };
  }

  // 简单的判断相等
  static equal(data: any, msg: string): SyncValidateFunc {
    return (input) => {
      if (input != data) return msg;
    };
  }
}

使用

const syncValidate = new SyncValidate({
  username: [
    SyncValidate.required('用户名不能为空!'),
    SyncValidate.phone('请输入正确手机号!'),
  ],
  password: [
    SyncValidate.required('密码不能为空!'),
    SyncValidate.minLength(8, '密码长度必须大于7'),
  ]
});

syncValidate.addValidateErrorListener((errorMessage) => {
  uni.showToast({
    icon: 'none',
    title: errorMessage,
    duration: 1500
  });
})

onLogin() {
if (
    !syncValidate.check({username: this.username.trim()})
    ||
    !syncValidate.check({password: this.password.trim()})
   )
      {
        return;
      }
        ...
}

js:

class SyncValidate {
    constructor(options) {
        this.options = options;
    }
    check(keyVal) {
        const keys = Object.keys(keyVal);
        if (!keys.length) {
            throw new Error("至少的验证一个.");
        }
        const key = keys[0];
        const val = keyVal[key];
        if (!this.options.hasOwnProperty(key)) {
            throw new Error(`没有设置[${key}]的验证器.`);
        }
        for (let v of this.options[key]) {
            const errorMessage = v(val);
            if (errorMessage) {
                if (this.validateErrorListener &&
                    typeof this.validateErrorListener === "function") {
                    this.validateErrorListener(errorMessage);
                }
                else {
                    SyncValidate.validateErrorListener(errorMessage);
                }
                return false;
            }
        }
        return true;
    }
    checkAll(keysVals) {
        for (let key in keysVals) {
            if (this.check({ [key]: keysVals[key] }) === false) {
                return false;
            }
        }
        return true;
    }
    static validateErrorListener(errorMessage) {
        uni.showToast({
            icon: "none",
            title: errorMessage,
            duration: 1500,
        });
    }
    addValidateErrorListener(validateErrorListener) {
        this.validateErrorListener = validateErrorListener;
    }
    static required(msg) {
        return (input) => {
            if (!input)
                return msg;
        };
    }
    static minLength(len, msg) {
        return (input) => {
            if (typeof input === "string" && input.length < len)
                return msg;
        };
    }
    static maxLength(len, msg) {
        return (input) => {
            if (typeof input === "string" && input.length > len)
                return msg;
        };
    }
    static phone(msg, exp) {
        const phoneExp = exp ??
            /^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/;
        return (input) => {
            if (typeof input === "string" && !input.match(phoneExp)) {
                return msg;
            }
        };
    }
    static eql(data, msg) {
        return (input) => {
            if (input !== data)
                return msg;
        };
    }
    static equal(data, msg) {
        return (input) => {
            if (input != data)
                return msg;
        };
    }
}