当前位置: 首页 > news >正文

vue | async-validator 表单验证库 第三方库安装与使用

省流总结:async-validator,

安装 npm install async-validator --save

使用:import Schema from 'async-validator'; 

const validator = new Schema({ [modelName]: 规则 });

validator.validate({ [modelName]: 要验证的数据 }).then(验证通过的处理).catch(验证失败的处理)

验证- Promise写法:当validator.validate中的name(key descriptor中的name(key相同时,就可以使用规则去验证对应的值.then 即验证通过.catch 即验证失败 其中有两个错误信息 errors输出所有的错误信息 fields提示具体哪些字段出现了问题


github地址:yiminghe/async-validator: validate form asynchronous

安装:npm install async-validator --save

使用

1.引入Schema

2.创建 Schema 实例

3.验证:实例调用validate方法验证两种验证方式:① 回调,② Promise

 

注: descriptorname为 key  可以任意取名name 里的 rules定义好的预设类型规则


验证方法- Promise的写法:当 validator.validate中的name(即 key) 与 descriptor中的 name(即 key)相同时,就可以使用规则去 验证对应的值。

.then(),即验证通过

.catch(),即验证失败。其中,有两个错误信息 errors输出所有的错误信息,fields 提示具体哪些字段出现了问题。


官网给的参考代码(两种验证方法:回调/Promise): 

import Schema from 'async-validator';
const descriptor = {name: {type: 'string',required: true,validator: (rule, value) => value === 'muji',},age: {type: 'number',asyncValidator: (rule, value) => {return new Promise((resolve, reject) => {if (value < 18) {reject('too young');  // reject with error message} else {resolve();}});},},
};
const validator = new Schema(descriptor);
validator.validate({ name: 'muji' }, (errors, fields) => {if (errors) {// validation failed, errors is an array of all errors// fields is an object keyed by field name with an array of// errors per fieldreturn handleErrors(errors, fields);}// validation passed
});// PROMISE USAGE
validator.validate({ name: 'muji', age: 16 }).then(() => {// validation passed or without error message
}).catch(({ errors, fields }) => {return handleErrors(errors, fields);
});

 

应用 例子:

innerValue 为 model 数据,itemRules为规则,

实例化一个Schema, [modelName]:规则 调用 validate 验证规则。

validator.validate中的name(key descriptor中的name(key相同时,就可以使用规则去验证对应的值。.then 即验证通过.catch 即验证失败 其中有两个错误信息 errors输出所有的错误信息 fields提示具体哪些字段出现了问题

RuleItem 规则类型,点击进去 可以查看所有的规则选项

ValidateError、ValidateFieldsError:指明 错误信息的类型

类型:如 email,可以验证是否为正确的email格式。

http://www.xdnf.cn/news/1042435.html

相关文章:

  • 高效I/O处理:模型与多路复用的探讨
  • Spring学习笔记
  • (14)python+ selenium自动化测试 -回顾
  • 探索数据的力量:Elasticsearch中指定链表字段的统计查询记录
  • 生日悖论理论及在哈希函数碰撞中的应用
  • AI视野:写作应用AI排行榜Top10 | 2025年05月
  • 隐式时钟与外时钟对比2025.6.14
  • boost之signal的封装及使用例子
  • 数列求和计算
  • XCTF-misc-János-the-Ripper
  • C++斯特林数在C++中的数学理论与计算实现1
  • 飞牛NAS本地化部署Dify打造私有LLMOps平台
  • CARSIM-制动压力与制动踏板行程关系
  • acm模式stringstream
  • 滚珠螺杆的预紧间隙如何调整?
  • 大模型量化与剪枝
  • 无监督的预训练和有监督任务的微调
  • 源端串联端接
  • 【八股消消乐】构建微服务架构体系—实现制作库与线上库分离
  • 图的遍历模板
  • Linux【8】-----Linux系统编程(并发编程原理与应用)
  • YOLO系列对指定图片绘制模型热力图
  • Day.31
  • 从0到1开发一个自己的工具 MCP 并发布到 test PyPi(Python个人版)
  • 代码审计服务:如何解决误报与漏报难题,保障软件安全?
  • 从MVC到MVVM:从过程式走向声明式
  • 14:00开始面试,14:06就出来了,问的问题有点变态。。。
  • 谷歌“Find Hub”,携UWB、卫星连接、行李追踪三大功能强势挑战苹果“查找”
  • 渲染学进阶内容——机械动力的渲染系统(2)
  • 【DSP笔记 · 第4章】算法的奇迹:快速傅里叶变换(FFT)如何改变世界