Appearance
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需要满足最小长度为30isMobile: 是否符合大陆手机输入格式
自定义规则类型
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()
