async-validator 原始碼學習筆記（四）：validator

前端人發表於2022-03-24
原始碼筆記

系列文章：

1、async-validator 原始碼學習（一）：文件翻譯

2、async-validator 原始碼學習筆記（二）：目錄結構

3、async-validator 原始碼學習筆記（三）：rule

原始碼目錄結構如圖：

async-validator 原始碼學習筆記（四）：validator

 

validator 原始碼分析

validator 與 rule 緊密相連，rule 目錄下的檔案主要功能是校驗 value 和 rule ，然後給 errors 陣列中新增 error 。validator 則是把 校驗的 value 細分成各種型別，對不同的型別進行不同的 rule 校驗組合，便於回撥函式 callback 對最終的 errors 陣列做最終的處理。

校驗流程如下：

1、校驗方法結構相同，第一步先判斷是否需要進行校驗：

  • 欄位是必須的。
  • 欄位是非必須的，但 source 物件中的該欄位有值且不為空。

2、如果是需要校驗的，校驗的步驟為：

  • 先校驗是否為空。
  • 校驗該欄位不為空的 rule。
  • 再校驗該型別對應的其他的 rule。

3、校驗完成之後，最後開始執行回撥，用回撥函式返回 errors 。

validator 資料夾中的 index.d.ts：

是 validator 目錄的統一出口管理。

declare const _default: {
 string: import("..").ExecuteValidator;
 method: import("..").ExecuteValidator;
 number: import("..").ExecuteValidator;
 boolean: import("..").ExecuteValidator;
 regexp: import("..").ExecuteValidator;
 integer: import("..").ExecuteValidator;
 float: import("..").ExecuteValidator;
 array: import("..").ExecuteValidator;
 object: import("..").ExecuteValidator;
 enum: import("..").ExecuteValidator;
 pattern: import("..").ExecuteValidator;
 date: import("..").ExecuteValidator;
 url: import("..").ExecuteValidator;
 hex: import("..").ExecuteValidator;
 email: import("..").ExecuteValidator;
 required: import("..").ExecuteValidator;
 any: import("..").ExecuteValidator;
};
export default _default;

 

import("..").ExecuteValidator 限制型別，ExecuteValidator 被定義在 interface.ts 檔案內。

// 摘自其中一部分
/**
 *  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.
 */
export declare type ExecuteValidator = (
  rule: InternalRuleItem, 
  value: Value, 
  callback: (error?: string[]) => void, 
  source: Values, 
  options: ValidateOption
 ) => void;

 

上述的解釋翻譯為中文：

/*
執行任何型別驗證
@param rule 校驗的規則
@param value 需要校驗欄位的當前值
@param callback 回撥函式
@param source 需要校驗的欄位
@param options 校驗選項
@param options.message 校驗的 messages
*/

any.d.ts

校驗任意型別只需要一步，校驗不為空即可。

import { ExecuteValidator } from '../interface';
declare const any: ExecuteValidator;
export default any;

 

array.d.ts

校驗陣列。

import { ExecuteValidator } from '../interface';
declare const array: ExecuteValidator;
export default array;

 

校驗陣列，一般需要兩步：1、校驗非空陣列。2、校驗範圍。

array?: {
 len?: ValidateMessage<[FullField, Range]>;
 min?: ValidateMessage<[FullField, Range]>;
 max?: ValidateMessage<[FullField, Range]>;
 range?: ValidateMessage<[FullField, Range, Range]>;
};

 

boolean.d.ts

import { ExecuteValidator } from '../interface';
declare const boolean: ExecuteValidator;
export default boolean;

 

date.d.ts

校驗時間。

import { ExecuteValidator } from '../interface';
declare const date: ExecuteValidator;
export default date;
declare type ValidateMessage<T extends any[] = unknown[]> = string | ((...args: T) => string);
date?: {
 format?: ValidateMessage;
 parse?: ValidateMessage;
 invalid?: ValidateMessage;
};

 

enum.d.ts

校驗列舉值。

import { ExecuteValidator } from '../interface';
declare const enumerable: ExecuteValidator;
export default enumerable;
enum?: ValidateMessage<[FullField, EnumString]>;

 

float.d.ts

校驗浮點數。

import { ExecuteValidator } from '../interface';
declare const floatFn: ExecuteValidator;
export default floatFn;

 

integer.d.ts

校驗整數。

import { ExecuteValidator } from '../interface';
declare const integer: ExecuteValidator;
export default integer;

 

method.d.ts

import { ExecuteValidator } from '../interface';
declare const method: ExecuteValidator;
export default method;

 

number.d.ts

import { ExecuteValidator } from '../interface';
declare const number: ExecuteValidator;
export default number;

 

校驗數字，一般需要兩步：1、校驗不為空。2、校驗範圍。

number?: {
 len?: ValidateMessage<[FullField, Range]>;
 min?: ValidateMessage<[FullField, Range]>;
 max?: ValidateMessage<[FullField, Range]>;
 range?: ValidateMessage<[FullField, Range, Range]>;
};

 

object.d.ts

校驗物件，一般需要兩步：1、校驗不為空。2、校驗型別。

import { ExecuteValidator } from '../interface';
declare const object: ExecuteValidator;
export default object;

 

pattern.d.ts

需要兩步。第一步校驗不為空，第二步校驗 pattern。

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

 

regexp.d.ts

校驗正規表示式。

import { ExecuteValidator } from '../interface';
declare const regexp: ExecuteValidator;
export default regexp;

 

type.d.ts

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

 

相關文章