热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

asyncvalidator源码学习笔记(四):validator

系列文章:1、async-validator源码学习(一):文档翻译2、async-validator源码学习笔记(二):目录结构3、async-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 = 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;

 


推荐阅读
  • Flutter 核心技术与混合开发模式深入解析
    本文深入探讨了 Flutter 的核心技术,特别是其混合开发模式,包括统一管理模式和三端分离模式,以及混合栈原理。通过对比不同模式的优缺点,帮助开发者选择最适合项目的混合开发策略。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • 本文详细介绍了在 CentOS 系统中如何创建和管理 SWAP 分区,包括临时创建交换文件、永久性增加交换空间的方法,以及如何手动释放内存缓存。 ... [详细]
  • 小编给大家分享一下Vue3中如何提高开发效率,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获, ... [详细]
  • 在移动端开发中,多点触控手势是提升用户体验的重要手段。然而,目前只有iOS浏览器原生支持手势事件,其他设备需要通过touchstart、touchmove和touchend等基础事件进行自定义实现。本文将详细介绍如何在Vue项目中实现多点触控手势。 ... [详细]
  • 在项目需要国际化处理时,即支持多种语言切换的功能,通常有两种方案:单个包和多个包。本文将重点讨论单个包的实现方法。 ... [详细]
  • 短视频app源码,Android开发底部滑出菜单首先依赖三方库implementationandroidx.appcompat:appcompat:1.2.0im ... [详细]
  • 本文详细介绍了`android.os.Binder.getCallingPid()`方法的功能和应用场景,并提供了多个实际的代码示例。通过这些示例,开发者可以更好地理解如何在不同的开发场景中使用该方法。 ... [详细]
  • 原文地址:https:blog.csdn.netqq_35361471articledetails84715491原文地址:https:blog.cs ... [详细]
  • 本文将深入探讨 Unreal Engine 4 (UE4) 中的距离场技术,包括其原理、实现细节以及在渲染中的应用。距离场技术在现代游戏引擎中用于提高光照和阴影的效果,尤其是在处理复杂几何形状时。文章将结合具体代码示例,帮助读者更好地理解和应用这一技术。 ... [详细]
  • 实现系统调用
    实现系统调用一、实验环境​本次操作还是基于上次编译Linux0.11内核的实验环境进行操作。环境如下:二、实验目标​通过对上述实验原理的认识,相信 ... [详细]
  • 微信小程序开发指南:创建动态电影选座界面
    本文详细介绍如何在微信小程序中实现一个动态且可视化的电影选座组件,提高用户体验。通过合理的布局和交互设计,使用户能够轻松选择心仪的座位。 ... [详细]
  • 关于进程的复习:#管道#数据的共享Managerdictlist#进程池#cpu个数1#retmap(func,iterable)#异步自带close和join#所有 ... [详细]
  • 我自己做了一个网站图片的抓取,感觉速度有点慢抓取4000张图片可能得用15分钟左右的时间,我百度看用线程可以加快抓取,然后创建了5个线程抓取,但是5个线程是同步执行同样的操作一个图片就 ... [详细]
  • 本文将详细介绍如何在 Vue 项目中使用 Handsontable 插件,包括 npm 安装、基本配置和常用功能的实现。 ... [详细]
author-avatar
麦豪小仙
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有