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 相关文章推荐
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
Vue 换肤的示例实践
Jan 23 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
vue-cli初始化项目中使用less的方法
Aug 09 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
ThinkPHP中关联查询实例
2014/12/02 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
PHP加密技术的简单实现
2016/09/04 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
简单的php购物车代码
2020/06/05 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
keras slice layer 层实现方式
2020/06/11 Python
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
经典毕业生求职信
2014/07/12 职场文书
丧事答谢词大全
2015/09/30 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
实习报告怎么写
2019/06/20 职场文书