async-validator源码学习笔记（三）：rule

系列文章：

1、async-validator 源码学习（一）：文档翻译

2、async-validator 源码学习笔记（二）：目录结构

rule 主要实现的是校验规则，文件结构为下图：

 

一、rule 目录文件介绍

其中 index.d.ts 文件：

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 。

required.d.ts 文件：

import { ExecuteRule } from '../interface';declare const required: ExecuteRule;export default required;

 

主要作用是校验必填字段的规则。

其中 ExecuteRule 是来自于 interface.d.ts 文件中的

// 摘自其中的一部分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 options.messages 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 options.message 校验的 messages

type.d.ts

import { ExecuteRule } from '../interface';declare const type: ExecuteRule;export default type;

 

校验值的类型，可能的类型有：integer、float、array、regexp、object、method、email、number、data、url、hex

range.d.ts

import { ExecuteRule } from '../interface';declare const range: ExecuteRule;export default range;

 

校验是否满足最大最小值合理区间的规则

whitespace.d.ts

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 options.messages The validation messages. */declare const whitespace: ExecuteRule;export default whitespace;

 

校验空白字符的规则

enum.d.ts

import { ExecuteRule } from '../interface';declare const enumerable: ExecuteRule;export default enumerable;

 

校验值是否存在枚举值列表中的规则

pattern.d.ts

import { ExecuteRule } from '../interface';declare const pattern: ExecuteRule;export default pattern;

 

校验正则表达式的规则

二、rule 应用

interface.d.ts 中定义 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: 'info.age'， }]

 

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 位',   },  ],}