async-validator是一个表单异步验证库，阿里的Ant-design和Element组件库中的表单验证使用async-validator，目前版本已经更新到4.0.7，拥有1,067,202次下载，不仅支持js，还支持typeScript。这是一个超级强大的库，有兴趣的可以了解一下。async-validator官网地址：https://www.npmjs.com/package/async-validator。async-validator美中不足的是没有官方的中文文档，看英文也很吃力！网上百度低版本翻译很多，现在已经升级到4.0.7了。有些功能被废弃了，有些用不上的东西会出现Attributes，所以今天就帮大家自己翻译一下，方便学习。1.从入门到入门安装命令：npmiasync-validator//或npminstallasync-validator使用方法：//引入异步importSchemafrom'async-validator'//定义规则描述constdes={name:{type:"string",required:true,message:"内容不能为空"}}//创建验证器constvalidator=newSchema(des)//添加验证validator.validate({name:"value"},(errors,field)=>{if(errors){returnnewError(`validationfailed`)}//validationfailed})在vue3引入的Ant-design组件中使用async-validator，使用示例：承诺使用方法://introduceasynchronousimportSchemafrom'async-validator'//定义规则描述constdes={name:{type:"string",required:true,message:"内容不能为空",asyncValidator:(rule,value)=>{//@rule是这里的限制规则//@value获取属性名的值returnnewPromise((resolve,reject)=>{setTimeout(()=>{//使用定时器模拟异步操作if(value!=""){resolve()//成功}else{reject("validationfailed")}},2000)})}}}//创建验证器constvalidator=newSchema(des)//添加验证validator.validate({name:"value"},(errors,field)=>{}).then(()=>{console.log('验证成功')}).catch(({errors,fields}=>{console.log('验证失败',errors)}))使用起来非常简单，大家可以根据上面的例子进行简单的修改，也可以自己尝试一下！二、API学习1、validatevalidate：添加一个验证方法，使用语法：validator.validate(source,[options],callback):Promisesource是需要验证的属性和值，需要的参数options是option描述验证对象的处理。callback校验完成后的回调函数。该方法返回一个Promise对象，所以有：then()成功回调。catch(({errors,fields})=>{})失败回调。Options选项参数有：suppressWarning：是一个布尔值，是否抑制无效的内部警告。first：它是一个布尔值。当第一次验证失败时，是否向后继续验证。如果为true，则只返回第一次验证失败的信息。firstFields：布尔值或字符串数??组。当指定的第一个校验规则产生错误时，调用回调，不再处理同字段的校验规则。true表示所有字段。2.Rulesrules：表示校验规则，通常有两种写法：第一种：常写成对象数组，方便单个字段添加多个校验规则。使用如下：constdescriptor={name:[{type:'string',required:true,validator(rule,value){returnvalue!=''}message:'Usernamecannotbeempty',},{type:'string',min:3,max:8,validator(rule,value){returnrule.minassert.equal(source.name,'user'));value.trim()insidethetransformfunction传入的值前后的空格都会被去掉，所以验证成功。如果没有传递函数，验证将失败。13.message根据应用的需要，可能需要i18??n支持，或者你可能更喜欢不同的验证错误信息。最简单的方法是给规则赋一个message属性：construles={username:{type:'string',required:true,message:"Usernamecannotbeempty"}}message可以是任何类型，比如jsxformat:construles={username:{type:'string',required:true,message:"Usernamecannotbeempty"},}message也可以是函数，比如vue-i18n:{name:{type:'string',required:true,message:()=>this.$t('请填写姓名')}}不同的语言可能需要相同的schema验证规则，在这种情况下，对于每种语言复制模式规则是没有意义的。在这种情况下，您可以为语言提供自己的消息并将其分配给shema：importSchemafrom'async-validator';constcn={required:'%sisrequired',};constdescriptor={name:{type:'string',required:true}};constvalidator=newSchema(descriptor);//与defaultMessagesvalidator.messages(cn)深度合并；如果要定义自己的验证函数，最好使用messagecharacters字符串分配给messages对象，然后通过选项访问消息。验证函数中的消息属性。14、asyncValidator自定义指定字段的异步验证函数：construles={username:[{type:'string',required:true,whitespace:true,transform(value){returnvalue.trim()},message:'用户名不能是空格',asyncValidator:(rule,value)=>{returnnewPromise((resolve,reject)=>{setTimeout(()=>{//模拟异步操作if(value!=''){resolve()}else{reject('error')}},2000)})},],}constvalidator=newSchema(rules)constsource={用户名:'user'};validator.validate(source).then((res)=>{console.log('res',res)}).catch(({errors,fields})=>{console.log('err',errors)console.log('fields',fields)})15.Validator自定义指定字段的同步校验函数：construles={username:[{type:'string',required:true,validator(rule,value){returnvalue!=''},message:'用户名不能为空',},{type:'string',min:6,max:10,validator(rule,value){returnrule.min<值.长度&&值.长度<rule.max},message:'length6-8',},],}FAQ如何取消警告：importSchemafrom'async-validator';Schema.warning=function(){};如果检查booleantrue使用枚举类型并将booleantrue参数作为选项传递{type:'enum',enum:[true],message:'',}测试用例npm测试测试覆盖npmruncoverageopencoverage/dir.
