validator 与 rule 紧密相连,rule 目录下的文件主要功能是校验 value 和 rule ,然后给 errors 数组中添加 error 。validator 则是把 校验的 value 细分成各种类型,对不同的类型进行不同的 rule 校验组合,便于回调函数 callback 对最终的 errors 数组做最终的处理。 校验流程如下: 1、校验方法结构相同,第一步先...
官网https://github.com/yiminghe/async-validator 本文是在使用iview的表单时候使用该规则的,所以没有仔细研究相关函数里面的参数等等 基础用法: email: [ { 校验规则1 }, { 校验规则2 }, }, ], 校验规则包含: type: String,-string:Must be oftypestring.This is thedefaulttype.-number:Must be oftype...
validator 与 rule 紧密相连,rule 目录下的文件主要功能是校验 value 和 rule ,然后给 errors 数组中添加 error 。validator 则是把 校验的 value 细分成各种类型,对不同的类型进行不同的 rule 校验组合,便于回调函数 callback 对最终的 errors 数组做最终的处理。 校验流程如下: 1、校验方法结构相同,第一步先...
关于'range'校验,其能力包含校验数值的大小、字符串或数组的长度,因此rule对象相应添加了min、max、len属性,其中len属性的优先级高于min、max属性。在async-validator源码的实现中,通过先将字符串和数组形式的value转换成待校验的value.length,再通过if语句协调len与min、max校验规则的优先级。具体可参详src/rule/range...
callback: 校验完成后要调用的callback。它期望传递一个Error实例数组以指示校验失败。如果校验是同步的,则可以直接返回false、Error或Error Array。 source: 传给validate 方法的源对象。 options: 额外选项。 用法一 {// 可以把它看出校验规则的另外一种写法,最开始的是对象形式name(rule,value,callback,source,op...
import asyncValidator from 'async-validator'; const Validator = asyncValidator.default; // 定义校验规则 const rules = { name: { type: 'string', required: true, validator: (rule, value) => value === 'muji', }, age: { type: 'number', ...
把原本的校验对象放到了rule属性中,并且添加了value、source、field属性 根据required和type补充了默认的validator校验函数 预处理 descriptor 对应的源码 让我们过一下这部分源码。 在构造函数中,把descriptor所有字段的rule转为了数组,保存到rules对象中。 代码语言:javascript ...
如果errors数组为空,说明校验成功,我们可以进行后续的处理。 通过以上步骤,我们就可以使用async-validator对复杂对象进行校验了。需要注意的是,对于更复杂的嵌套结构和自定义校验规则,我们可以根据需要进一步扩展和定义校验规则。
dog: { required:true, message: '请填写dog', trigger: 'blur' },//type默认是string'human.name':[{type: "string", required:true, message: '请填写名字', trigger: 'blur'}],//有多条校验条件的时候可以放个object数组'human.sex':{ type: "string",required:true, message: '请填写性别', tr...
前后端开发中,表单校验是一个常用且必要的功能。前端开发中一些 UI 库如Element、Ant Design表单组件都使用了async-validator作为校验库。 async-validator 功能与特性: 内置多种数据格式校验功能,包括数组、枚举、对象 异步校验库,支持自定义校验方法 一个字段支持多个校验规则,支持自定义字段错误信息 ...