<input id="ohw05"></input>
  • <table id="ohw05"><menu id="ohw05"></menu></table>
  • <var id="ohw05"></var>
  • <code id="ohw05"><cite id="ohw05"></cite></code>
    <label id="ohw05"></label>
    <var id="ohw05"></var>
  • async-validator 源碼學習筆記(四):validator

    系列文章:

    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;

     

    posted @ 2022-03-24 09:00  前端人  閱讀(198)  評論(0編輯  收藏  舉報
    国产美女a做受大片观看