Async Validator 异步验证使用说明


Posted in Javascript onJuly 03, 2017

async-validator 是一个异步验证的库,需要传入要验证的数据和验证规则

官方链接 https://github.com/yiminghe/async-validator

要检验的数据,格式要求如下:

{
 a:xxx,
 b:xxx
}

检验规则定义格式如下:

{
 a:[
  {验证规则, message: 'xxx'},
  {验证规则, message: 'xxx'}
 ],
 b:[
  {验证规则, message: 'xxx'}
 ]
}

message是规则没通过时返回的错误消息

举个例子, 因为是异步验证,所以我们用ES6 的 Promise去调用它,方便使用

var inputData = {'item':'12345'}
var rules = [
 {required: true, message: '年龄不能为空'},
 {type: 'number', message: '年龄必须为数字值'}
]
function validateData() {
 var validateRuler = new Promise(function (resolve, reject) {
 var validator = new AsyncValidator(rules)
 validator.validate(inputData, { firstFields: true }, (errors, fields) => {
  resolve(errors)
 })
 return validateRuler
}
function validate() {
 validateData().then(function (errors) {
  console.log(errors)
  if (errors === null) {
    // 通过验证,该干嘛干嘛
  } else {
    // 把验证结果展示在页面上
  }
 })
}
validate()

如果验证没通过是这样

通过了则返回 null

需要注意的是,如果传入的规则是空数组

上面的resolve(errors)是完全不会执行的

以上所述是小编给大家介绍的Async Validator 异步验证使用说明,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
详解JavaScript函数
Dec 01 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
基于JSON数据格式详解
Aug 31 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 #Javascript
Require.js的基本用法详解
Jul 03 #Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 #Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 #Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 #Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 #Javascript
微信小程序开发中的疑问解答汇总
Jul 03 #Javascript
You might like
php 方便水印和缩略图的图形类
2009/05/21 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
PHP中16个高危函数整理
2019/09/19 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
深入了解NumPy 高级索引
2020/07/24 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
擅自离岗检讨书
2014/02/11 职场文书
社会调查研究计划书
2014/05/01 职场文书
班级读书活动总结
2014/06/30 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
js之ajax文件上传
2021/05/13 Javascript
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL