Vue ElementUi同时校验多个表单(巧用new promise)


Posted in Javascript onJune 06, 2018

前言

有ABCD四个表单,提交的时候同时校验(是的,后台管理系统的需求就是这样),巧用new promise。

实现的方法有很多种,我讲下自己觉得比较优雅的方式,欢迎各位大大的指正哈。

代码

let formArr=['formA','formB','formC','formD']//假设这是四个form表单的ref
var resultArr=[]//用来接受返回结果的数组
var _self=this
 function checkForm(formName) { //封装验证表单的函数
  var result = new Promise(function(resolve, reject) {
    _self.$refs[formName].validate((valid) => {
      if (valid) {
        resolve();
      } else { reject() }
    })
  })
  resultArr.push(result) //push 得到promise的结果
}
formArr.forEach(item => { //根据表单的ref校验
    checkForm(item)
 })
Promise.all(resultArr).then(function() { //都通过了
  alert('恭喜你,表单全部验证通过啦')
}).catch(function() {
  console.log("err");
});

总结

以上所述是小编给大家介绍的Vue ElementUi同时校验多个表单(巧用new promise),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE iframe的onload方法分析小结
Jan 07 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
jquery动态添加删除div 具体实现
Jul 20 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
vue打包相关细节整理(小结)
Sep 28 Javascript
原生js实现随机点名功能
Nov 05 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 #Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 #Javascript
详解创建自定义的Angular Schematics
Jun 06 #Javascript
vue组件实现进度条效果
Jun 06 #Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 #Javascript
vue组件实现可搜索下拉框扩展
Oct 23 #Javascript
微信小程序实现美团菜单
Jun 06 #Javascript
You might like
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
PHP经典的给图片加水印程序
2006/12/06 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
解析php中const与define的应用区别
2013/06/18 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
加载 Javascript 最佳实践
2011/10/30 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
python实现批量下载新浪博客的方法
2015/06/15 Python
Flask框架信号用法实例分析
2018/07/24 Python
详解python statistics模块及函数用法
2019/10/27 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
大学开学计划书
2014/04/30 职场文书
服务标兵事迹材料
2014/05/04 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
个人自我剖析材料
2014/09/30 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
三方协议书
2015/01/27 职场文书
护士先进个人总结
2015/02/13 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
Python基础之条件语句详解
2021/06/16 Python
Linux磁盘管理方法介绍
2022/06/01 Servers