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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
详解Node 定时器
Feb 26 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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
PHP个人网站架设连环讲(三)
2006/10/09 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
PHP实现的json类实例
2015/07/28 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
Jquery 学习笔记(一)
2009/10/13 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
微信小程序自定义组件
2017/08/16 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
python开启多个子进程并行运行的方法
2015/04/18 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python随机数函数代码实例解析
2020/02/09 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
企业办公室岗位职责
2014/03/12 职场文书
医院护士工作检讨书
2014/10/26 职场文书
合同范本之电脑出租
2019/08/13 职场文书