首页 技术 正文
技术 2022年11月11日
0 收藏 536 点赞 4,062 浏览 5328 个字

系列文章:

1、async-validator 源码学习(一):文档翻译

2、async-validator 源码学习笔记(二):目录结构

3、async-validator 源码学习笔记(三):rule

4、async-validator 源码学习笔记(四):validator

5、async-validator 源码学习笔记(五):Schema

一、validate 介绍

validate 是 async-validator 的核心方法,不仅需要掌握它的使用,也需要了解它的原理。

使用

validator.validate( source, [options], callback )
.then(()=>{})
.catch( ({errors, fields}) => {})

参数

  • source 是需要验证的对象
  • options 是描述验证的处理选项的对象
  • callback 校验完成的回调函数

返回值是一个 promise 对象

  • then 是校验通过执行。
  • catch 校验失败执行。
  • errors 是 error 的数组,fields 是一个对象,包含监听对象和 error 的数组。

validate 方法校验的流程为:

源码是如何定义 validate 方法的呢?

二、validate 源码解读

/*
参数:
source_ 即 source :校验的对象。
o 即 options :描述验证处理选项。
oc 即 callback:验证完成的回调函数。
*/
_proto.validate = function validate(source_, o, oc) {
...
var source = source_;
var options = o;
var callback = oc;
...
return asyncMap(series, options, function (data, doIt) {
....
},function (results) {
complete(results);
}, source);
};

validate 方法前半部分主要是在构造一个完整的 series 对象,返回的是 asyncMap 方法。我们来看看 validate 方法内部的几个方法,分别作用是什么。

参数处理

_proto.validate = function validate(source_, o, oc) {
...
var source = source_;
var options = o;
var callback = oc;
// options 是可选参数
// 如果 options 是函数时,说明第二个是回调函数,options 是空对象
if (typeof options === 'function') {
callback = options;
options = {};
}
...
};

检查校验规则

检查校验规则是否为空,为空的时候立即执行回调。

if (!this.rules || Object.keys(this.rules).length === 0) {
if (callback) {
callback(null, source);
}
return Promise.resolve(source);
}

complete 函数

complete 函数主要是为了整合 errors 数组和 fields 对象,然后用 callback 回调函数把它们返回。

_proto.validate = function validate(source_, o, oc) {
...
function complete(results) {
var errors = [];
var fields = {};
// 定义 add 方法,给 errors 添加元素 error
function add(e) {
if (Array.isArray(e)) {
var _errors;
// 给 errors 添加 error
errors = (_errors = errors).concat.apply(_errors, e);
} else {
errors.push(e);
}
}
// 迭代 resaults 把 resaults 中的每个 error 都加入 errors
for (var i = 0; i < results.length; i++) {
add(results[i]);
}
//如果最后结果 errors 为空,就返回 null
if (!errors.length) {
callback(null, source);
} else {
//把 errors 中相同 field 的 error 合并,转换为对象的形式
fields = convertFieldsError(errors);
// errors fields 回调传出参数
callback(errors, fields);
}
}
return asyncMap(series, options, function (data, doIt) {
....
},function (results) {
complete(results);
}, source);
};

options.message

messsage 主要是定义检验失败后的错误提示信息,官方提供了一个默认模板,我们也可以进行定制化,此处的 options.message 就是来处理到底使用哪个的?根据情况到底是使用默认还是合并。

_proto.validate = function validate(source_, o, oc) {
...
//如果 options 中有 message 属性
if (options.messages) {
// 创建一个 message ,使用的是默认
var messages$1 = this.messages();
if (messages$1 === messages) {
messages$1 = newMessages();
}
// 将options 的 message 与默认的 message 合并
deepMerge(messages$1, options.messages);
options.messages = messages$1;
} else {
// options 没有 message 属性
options.messages = this.messages();
}
return asyncMap(series, options, function (data, doIt) {
....
},function (results) {
complete(results);
}, source);
};

series 对象

生成的 serise 对象,目的是为了统一最终的数据格式。

_proto.validate = function validate(source_, o, oc) {
...
var series = {};
// keys 是 rule 的所有键
var keys = options.keys || Object.keys(this.rules);
keys.forEach(function (z) {
// arr 存放 rules[z] 的一个数组
var arr = _this2.rules[z];
// value 存放 source[z] 是一个值或对象
var value = source[z];
arr.forEach(function (r) {
var rule = r;
// 当有transform属性而且是个函数时,要提前把值转换
if (typeof rule.transform === 'function') {
// 浅拷贝下,打破引用
if (source === source_) {
source = _extends({}, source);
}
value = source[z] = rule.transform(value);
}
// 浅拷贝打破引用
if (typeof rule === 'function') {
rule = {
validator: rule
};
} else {
rule = _extends({}, rule);
} // Fill validator. Skip if nothing need to validate
rule.validator = _this2.getValidationMethod(rule);
// 异常处理
if (!rule.validator) {
return;
}
rule.field = z;
rule.fullField = rule.fullField || z;
rule.type = _this2.getType(rule);
// 生成完整的 series
series[z] = series[z] || [];
series[z].push({
rule: rule,
value: value,
source: source,
field: z
});
});
});
return asyncMap(series, options, function (data, doIt) {
....
},function (results) {
complete(results);
}, source);
};

asyncMap

asyncMap 作为一个返回函数,不得不说它又是什么内容呢?

异步迭代用的 asyncMap 函数并没有多长,它主要实现两个功能,第一是决定是串行还是并行的执行单步校验,第二个功能是实现异步,把整个迭代校验过程封装到一个 promise 中,实现了整体上的异步。

function asyncMap(objArr, option, func, callback, source) {
// 如果option.first选项为真,说明第一个error产生时就要报错
if (option.first) {
// pending 是一个promise
var _pending = new Promise(function (resolve, reject) {
// 定义一个函数next,这个函数先调用callback,参数是errors
// 再根据errors的长度决定resolve还是reject
var next = function next(errors) {
callback(errors);
// reject的时候,返回一个AsyncValidationError的实例
// 实例化时第一个参数是errors数组,第二个参数是对象类型的errors
return errors.length ? reject(new AsyncValidationError(errors, convertFieldsError(errors))) : resolve(source);
};
// 把对象扁平化为数组flattenArr
var flattenArr = flattenObjArr(objArr);
// 串行
asyncSerialArray(flattenArr, func, next);
});
// 捕获error
_pending["catch"](function (e) {
return e;
});
return _pending;
}
// 如果option.first选项为假,说明所有的error都产生时才报错
// 当指定字段的第一个校验规则产生error时调用callback,不再继续处理相同字段的校验规则。
var firstFields = option.firstFields === true ? Object.keys(objArr) : option.firstFields || [];
var objArrKeys = Object.keys(objArr);
var objArrLength = objArrKeys.length;
var total = 0;
var results = [];
// 这里定义的函数next和上面的类似,只不过多了total的判断
var pending = new Promise(function (resolve, reject) {
var next = function next(errors) {
results.push.apply(results, errors);
// 只有全部的校验完才能执行最后的callback和reject
total++; if (total === objArrLength) {
// 这个callback和reject/resolve是这个库既能回调函数又能promise的核心
callback(results);
return results.length ? reject(new AsyncValidationError(results, convertFieldsError(results))) : resolve(source);
}
}; if (!objArrKeys.length) {
callback(results);
resolve(source);
}
// 当firstFields中指定了该key时,说明该字段的第一个校验失败产生时就停止并调用callback
// 所以是串行的asyncSerialArray
// 没有指定该key,说明该字段的校验error需要都产生,就并行asyncParallelArray
objArrKeys.forEach(function (key) {
var arr = objArr[key]; if (firstFields.indexOf(key) !== -1) {
asyncSerialArray(arr, func, next);
} else {
asyncParallelArray(arr, func, next);
}
});
});
// 捕获error,添加错误处理
pending["catch"](function (e) {
return e;
});
// 返回promise实例
return pending;
}
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,083
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,558
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,407
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,180
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,817
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,900