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小数计算出现近似值的解决办法
Feb 06 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
jquery实现submit提交表单
Feb 03 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
详解ES6中的三种异步解决方案
Jun 28 Javascript
js+html实现点名系统功能
Nov 05 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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
javascript中match函数的用法小结
2014/02/08 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
Python IDLE入门简介
2017/12/08 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
分析经典Python开发工程师面试题
2019/04/08 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
业务员岗位职责
2013/11/16 职场文书
暑期社会实践方案
2014/02/05 职场文书
车间安全生产管理制度
2015/08/06 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers