系列文章：
1、async-validator 源码学习（一）：文档翻译
2、async-validator 源码学习笔记（二）：目录结构
rule 主要实现的是校验规则，文件结构为下图：
一、rule 目录文件介绍
其中 文件：
-
declare const _default: {
-
required: import("..").ExecuteRule;
-
whitespace: import("..").ExecuteRule;
-
type: import("..").ExecuteRule;
-
range: import("..").ExecuteRule;
-
enum: import("..").ExecuteRule;
-
pattern: import("..").ExecuteRule;
-
};
-
export default _default;
是 rule 目录的统一出口管理，主要是给 errors 数组添加对应的 error 。
文件：
-
import { ExecuteRule } from '../interface';
-
declare const required: ExecuteRule;
-
export default required;
主要作用是校验必填字段的规则。
其中 ExecuteRule 是来自于 文件中的
-
// 摘自其中的一部分
-
export declare type ExecuteRule = (
-
rule: InternalRuleItem,
-
value: Value,
-
source: Values,
-
errors: string[],
-
options: ValidateOption,
-
type?: string
-
) => void;
-
/**
-
* Performs validation for any type.
-
*
-
* @param rule The validation rule.
-
* @param value The value of the field on the source object.
-
* @param callback The callback function.
-
* @param source The source object being validated.
-
* @param options The validation options.
-
* @param The validation messages.
-
*/
ExecuteRule 是统一定义的函数类型别名，统一了函数传递参数和返回值的类型。等价于：
declare const required(rule, value, source, errors, options, type) 方法内的参数及其意义如下：
- @param rule 校验的规则
- @param value 需要校验字段的当前值
- @param source 需要校验的字段
- @param errors 本次校验将要去添加的 errors 数组
- @param options 校验选项
- @param 校验的 messages
-
import { ExecuteRule } from '../interface';
-
declare const type: ExecuteRule;
-
export default type;
校验值的类型，可能的类型有：integer、float、array、regexp、object、method、email、number、data、url、hex
-
import { ExecuteRule } from '../interface';
-
declare const range: ExecuteRule;
-
export default range;
校验是否满足最大最小值合理区间的规则
-
import { ExecuteRule } from '../interface';
-
/**
-
* Rule for validating whitespace.
-
*
-
* @param rule The validation rule.
-
* @param value The value of the field on the source object.
-
* @param source The source object being validated.
-
* @param errors An array of errors that this rule may add
-
* validation errors to.
-
* @param options The validation options.
-
* @param The validation messages.
-
*/
-
declare const whitespace: ExecuteRule;
-
export default whitespace;
校验空白字符的规则
-
import { ExecuteRule } from '../interface';
-
declare const enumerable: ExecuteRule;
-
export default enumerable;
校验值是否存在枚举值列表中的规则
-
import { ExecuteRule } from '../interface';
-
declare const pattern: ExecuteRule;
-
export default pattern;
校验正则表达式的规则
二、rule 应用
中定义 rule 单元格式
-
export interface RuleItem {
-
type?: RuleType; //类型
-
required?: boolean; //是否为空
-
pattern?: RegExp | string; //正则
-
min?: number; // 最小值或长度
-
max?: number; //最大值或长度
-
len?: number; // 长度
-
enum?: Array<string | number | boolean | null | undefined>; //校验值是否存在枚举值列表中的规则
-
whitespace?: boolean; //是否空白
-
fields?: Record<string, Rule>;//深度监听属性和规则
-
options?: ValidateOption;//选项
-
defaultField?: Rule; //校验属性内部值
-
transform?: (value: Value) => Value; //校验前转换
-
message?: string | ((a?: string) => string);//信息提示
-
//异步校验
-
asyncValidator?: (rule: InternalRuleItem, value: Value, callback: (error?: string | Error) => void, source: Values, options: ValidateOption) => void | Promise<void>;
-
//同步校验
-
validator?: (rule: InternalRuleItem, value: Value, callback: (error?: string | Error) => void, source: Values, options: ValidateOption) => SyncValidateResult | void;
-
}
-
// Rule 可以是一个对象，也可以是该对象的数组
-
export declare type Rule = RuleItem | RuleItem[];
rule 是本字段对应的校验规则：
-
{
-
field: "name",
-
fullField: "name",
-
message: "姓名为必填项",
-
required: false,
-
type: "string",
-
validator: ƒ required$1(rule, value, callback, source, options)
-
}
value 是本字段的值：如小明
source 是要校验的整个 source 对象：
-
{
-
name: '小明',
-
info: {
-
age: 17,
-
}
-
}
errors 是本次校验将要去添加的 errors 数组，假设之前没有 error，则 errors 为[]，如果之前已经存在了一些 error，则格式如下所示：
-
[
-
{
-
message: '年龄超出范围',
-
field: ''，
-
}
-
]
options 是该字段校验时的选项，当 message 属性为默认值时，格式如下：
-
{
-
firstFields: true,
-
messages: {
-
array: {len: "%s must be exactly %s in length", min: "%s cannot be less than %s in length", max: "%s cannot be greater than %s in length", range: "%s must be between %s and %s in length"},
-
clone: ƒ clone(),
-
date: {format: "%s date %s is invalid for format %s", parse: "%s date could not be parsed, %s is invalid ", invalid: "%s date %s is invalid"},
-
default: "Validation error on field %s",
-
enum: "%s must be one of %s",
-
number: {len: "%s must equal %s", min: "%s cannot be less than %s", max: "%s cannot be greater than %s", range: "%s must be between %s and %s"},
-
pattern: {mismatch: "%s value %s does not match pattern %s"},
-
required: "%s is required",
-
string: {len: "%s must be exactly %s characters", min: "%s must be at least %s characters", max: "%s cannot be longer than %s characters", range: "%s must be between %s and %s characters"},
-
types: {string: "%s is not a %s", method: "%s is not a %s (function)", array: "%s is not an %s", object: "%s is not an %s", number: "%s is not a %s", …},
-
whitespace: "%s cannot be empty",
-
}
-
}
三、项目开发应用
实际项目开发中验证规则 rule 的写法：
-
const rules = {
-
// 深度校验1
-
address: {
-
type: 'object',
-
required: true,
-
fields: {
-
//深度校验street属性
-
street: { type: 'string', required: true },
-
city: { type: 'string', required: true },
-
zip: {
-
type: 'string',
-
required: true,
-
len: 8,
-
message: 'invalid zip',
-
},
-
},
-
},
-
//校验 2 数组形式
-
username: [
-
{
-
type: 'string',
-
required: true,
-
whitespace: true,
-
transform(value) {
-
return value.trim()
-
},
-
message: '用户名不能为空格',
-
// 异步校验
-
asyncValidator: (rule, value) => {
-
return new Promise((resolve, reject) => {
-
setTimeout(() => {
-
if (value != '') {
-
resolve()
-
} else {
-
reject('error')
-
}
-
}, 2000)
-
})
-
},
-
},
-
{
-
type: 'string',
-
min: 3,
-
max: 20,
-
message: '长度 3- 20 位',
-
},
-
],
-
}