async-validator实现原理源码解析

import AsyncValidator from 'async-validator'; // 1.声明规则 descriptor const descriptor = { name: [ { type: 'string', required: true, message: 'name 字段不能为空!' }, // 通过调用callback, 传递验证是否通过的结果 { validator: (rule, value, callback) => { if (value === 'muji1') { return callback('name 不能等于 muji1'); } return callback(); } }, // 通过返回Error实例, 表示验证不通过 { validator: (rule, value) => { if (value === 'muji2') { return new Error('name 不能等于 muji2'); } return true; } }, // 通过返回Promise实例, 传递验证是否通过的结果 { validator: (rule, value) => { return new Promise((resole, reject) => { if (value === 'muji3') { return reject('name 不能等于 muji3'); } return resole(); }) } } ], age: { type: 'number', // 自定义验证规则. age字段不能小于18, 小于则提示 ‘年纪太小' validator: (rule, value, callback) => { if (value <18) { // 通过执行callback传递数据验证的结果 callback('年纪太小'); } else { callback(); } }, }, }; // 2.创建async-validator实例 const validator = new AsyncValidator(descriptor); // 3.数据源 const data = { name: 'muji', age: 16 } // 4.执行验证 validator.validate(data, function(errors, fields) { if (!errors) { // 验证成功 console.log('验证通过'); } else { // 验证失败 console.log('验证不通过', error); } }) 

constructor(descriptor: Rules) { this.define(descriptor); } define(rules: Rules) { // 规则配置不能为空 if (!rules) { throw new Error('Cannot configure a schema with no rules'); } // 规则配置必须是对象 if (typeof rules !== 'object' || Array.isArray(rules)) { throw new Error('Rules must be an object'); } this.rules = {}; // 统一字段的规则配置方式为数组形式。因为给字段配置验证规则时, 可存在对象、数组的配置方式(如下). /** 为name配置单条规则 * const descriptor = { name: { type: 'string', required: true } } 也可以数组形式为name配置多条规则 const descriptor = { name: [ { type: 'string', required: true }, { type: 'string', validator: (rule, value) => value === 'muji' } ] } */ Object.keys(rules).forEach(name => { const item: Rule = rules[name]; this.rules[name] = Array.isArray(item) ? item : [item]; }); } 

/** validate方法可接受三个参数 * source: 需要验证的数据源. * options：验证参数（可选） * callback：验证完成回调（可选。validate会返回promise，因此可直接通过promise执行验证完成后的逻辑） */ validate(source: Values, options: any = {}, callback: any = () => {}): Promise { /** * 第一步 * 处理传入参数。 * 如果options为函数, 则将该函数设置为完成回调，使第二个参数可直接传递callback, 方便调用者使用。 */ if (typeof options === 'function') { callback = options; options = {}; } // 此处省略了部分非核心逻辑代码 // series保存最终的数据验证的规则集合。 const series: Record = {}; /** * 第二步 * 遍历、处理rules中所有字段的验证规则。（rules为构造函数中处理的处理保存的数据） */ const keys = options.keys || Object.keys(this.rules); keys.forEach(field => { const rules = this.rules[field]; let value = source[field]; rules.forEach(rule => { // 此处省略了部分非核心逻辑代码 // 为rule添加validator验证器函数（每个规则都必须存在一个validator函数去处理数据的验证逻辑） // getValidationMethod就是获取该rule的validator验证函数。 // 如果rule中存在自定义的validator配置，则直接返回。 // 如果不存在，则尝试根据rule中的type数据类型获取内置的validator验证函数 rule.validator = this.getValidationMethod(rule); if (!rule.validator) { return; } // 为rule补充字段、类型的信息 rule.field = field; rule.fullField = rule.fullField || field; // 处理完rule后, 将该rule添加到series中 series[field] = series[field] || []; series[field].push({ rule, value, source, field: field, }); }); }); /** * 第三步 * 遍历series的验证规则，执行每条规则的validator验证函数进行数据的验证。 * 然后asyncMap返回Promise. 可监听数据验证结果 */ return asyncMap( series, options, (data, next) => { // 每个规则的遍历回调。处理每条规则，并且执行规则中的验证函数validator （下面分析函数内具体逻辑） }, errors => { // 完成回调。所有规则处理完成后执行的回调 }, source, ); } 

getValidationMethod(rule: InternalRuleItem) { // 存在自定义验证函数直接返回 if (typeof rule.validator === 'function') { return rule.validator; } // 省略部分非核心逻辑代码 // 根据指定的类型，获取对应的数据验证函数 return validators[this.getType(rule)] || undefined; } // 根据规则配置项的配置，返回不同的类型 getType(rule: InternalRuleItem) { // 不存在type类型, pattern为正则，则使用pattern类型 if (rule.type === undefined && rule.pattern instanceof RegExp) { rule.type = 'pattern'; } // 省略部分非核心逻辑代码 // 规则配置项中存在type则返回, 不存在则返回string类型 return rule.type || 'string'; } // async-validator中内置的数据类型。 var validators = { string: string, method: method, number: number, "boolean": _boolean, regexp: regexp, integer: integer, "float": floatFn, array: array, object: object, "enum": enumerable, pattern: pattern, date: date, url: type, hex: type, email: type, required: required, any: any }; 

/** * 遍历series的验证规则，执行每条规则的validator验证函数进行数据的验证。 * 然后asyncMap返回Promise. 可监听数据验证结果 */ return asyncMap( series, options, (data, next) => { const rule = data.rule; // 此处省略部分非核心逻辑 let res: ValidateResult; /** * 第一步 * 存在validator, 执行validator验证函数，不同数据类型的validator验证函数，对数据的验证逻辑不同 */ if (rule.validator) { /** * 执行validator验证器函数 * rule: 规则 * data.value：需要验证的值 * cb：validator执行完成后, 通过cb函数处理验证的结果，然后执行下一个规则的验证 * data.source：原始传入的数据源 * options: 调用validate时传递的options */ res = rule.validator(rule, data.value, cb, data.source, options); } /** * 第二步, 处理validator验证的返回结果, validator函数内部可以执行传递的cb函数传递验证的结果 */ if (res === true) { // validator返回true时，表示没有错误，直接执行cb进行下一个规则的验证。 cb(); } else if (res instanceof Error) { // validator返回Error时, 传递错误信息给cb函数, cb函数记录错误信息, 然后cb函数执行下一个规则的验证 cb(res.message); } else if (res && (res as Promise).then) { /** * validator验证函数中，亦可通过返回Promise传递验证的结果 * validator返回Promise时, 注册Promise的成功、失败回调 * 成功时：执行cb函数, 传递空, 表示不存在错误, 然后cb函数执行下一个规则 * 失败时: 执行cb函数, 传递错误信息, 然后cb函数执行下一个规则 */ (res as Promise).then( () => cb(), e => cb(e), ); } /** * validator验证函数验证完成后，需要执行cb函数，进行验证结果的处理、记录 * 并调用next使asyncMap执行下一个规则的验证 */ function cb(e: SyncErrorType | SyncErrorType[] = []) { let errorList = Array.isArray(e) ? e : [e]; if (errorList.length && rule.message !== undefined) { errorList = [].concat(rule.message); } /** * complementError中会为错误信息项填充额外的信息。如出现错误的字段、出现错误的值 */ let filledErrors = errorList.map(complementError(rule, source)); // asyncMap并不是同步循环series规则集合，而是遍历的过程中，需要等待执行next才会遍历下一个series中的规则 // 将错误结果filledErrors传递到下一个规则的事件循环中，最后所有规则验证完成时，能够获取到所有的规则的验证结果 next(filledErrors); } }, // errors 即所有验证不通过的错误记录（即执行next时传递的所有filledErrors） errors => { // 所有规则处理完成后执行的回调 let fields: ValidateFieldsError = {}; if (!errors.length) { // 不存在错误, 直接执行validate时传递的完成回调 callback(null, source); } else { // 存在错误 // 将errors错误记录按字段分类, 如每个字段可配置多条规则, 因此每个字段可能存在多个错误记录 // fields 数据格式如 { field1: [error1, error2], field2: [error1] } fields = convertFieldsError(errors); // 执行完成回调, 传递errors错误记录, fields错误记录分类 (callback as ( errors: ValidateError[], fields: ValidateFieldsError, ) => void)(errors, fields); } }, source, ); 

static function register(type: string, validator) { if (typeof validator !== 'function') { throw new Error( 'Cannot register a validator by type, validator is not a function', ); } // 将该type的validator数据验证器函数添加到validators中 // 后续执行数据验证时，会根据type在validators中取验证器对数据进行验证 validators[type] = validator; };