Skip to content

Validator - 验证器

该验证器采用了策略模式进行编写,预先写下了部分规则。用户可在创建实例时融入自定义规则

示例

验证表单

自定义表单时,参数按如下规则赋予

value:要验证的值,即add函数的第一个参数

args: add规则配置中传入的args配置

err: add规则配置中传入的err配置

自定义规则则是一个对象,对象value为一个返回Promise类型的数组

ts
import { Validator } from '@ey-use/utils';
import type {commonStrategiesOriginObj} from  '@ey-use/utils';
// 要验证的表单
const formData:commonStrategiesOriginObj = {
  userName: '名字',
  phoneNumber: '123456',
};
// 自定义规则
const selfStrategy: = {
  limtLength(value: any, [minLength, maxLength]: number[], err: string) {
    if (value.length < minLength || value.length > maxLength) {
      return Promise.reject(err || `值的长度需要在${minLength}-${maxLength}位之间`);
    }
    return Promise.resolve();
  },
};

const validator = new Validator(selfStrategy);
// 多条规则验证formData.userName
validator.add(formData.userName, [
  {
    strategy: 'isNotEmpty',// 内置规则
    err: '用户名不能为空',
  },
  {
    strategy: 'limtLength',
    args: [6, 10],
    err: '用户名长度需要在6-10位之间',
  },
]);
// 验证formData.phoneNumber
validator.add(formData.phoneNumber, [
  {
    strategy: 'isMobile',// 内置规则
    err: '手机号码格式不正确',
  },
]);

async function clickFn() {
  await validator.start();// 执行所有判断,中间由错误则中断
  console.log('修改正确');
}
clickFn();

类型与使用

内置的规则

isNotEmpty:不允许为空字符串

minLength:规定值的最小长度,额外参数:length

add中使用如下

ts
    add(value,{strategy:'minLength',args:[30]})//表示value需要满足最小长度为30

isMobile: 是否符合大陆手机输入格式

自定义规则类型

ts
Record<
  string,
  (...data: any[]) => Promise<any>
>

add方法参数类型

ts
    type strategyItem<T> = {
        strategy: T;// 规则名称
        args?: any[];// 额外参数
        err?: string;// 不符合规则时的错误提示
    };
    type secondArg=strategyItem<keyof typeof this.strategies> | keyof typeof this.strategies

    add(data:any,secondArg[])

使用讲解

  • new创建时传入自定义规则,不传则使用默认规则
ts
const validator = new Validator(selfStrategy);
  • add传入第一个为要检验的值,第二个为需要使用的规则
ts
validator.add(phoneNumber,['isNotEmpty',{strategy:'isMobile',err:'传入的手机格式错误'}])
  • start开始执行校验 validator.start()

一个让开发效率增倍的组件库