首页 > 编程 > JavaScript > 正文

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

2019-11-19 13:42:34
字体:
来源:转载
供稿:网友

前言

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

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

代码

let formArr=['formA','formB','formC','formD']//假设这是四个form表单的refvar 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),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表