这篇文章主要介绍了巧用 new promise 实现 vue ElementUi 同时校验多个表单功能, 实现的方法有很多种, 本文给大家带来的是一种比较完美的方案, 需要的朋友可以参考下
前言
有 ABCD 四个表单, 提交的时候同时校验 (是的, 后台管理系统的需求就是这样), 巧用 new promise.
代码
- 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");
- });
来源: http://www.qdfuns.com/article/42190/ca16aa9ede4c11f7337b91bc196a5e82.html