欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-15 10:51:48
前言 有abcd四个表单,提交的时候同时校验(是的,后台管理系统的需求就是这样),巧用new promise。 实现的方法有很多种,我讲下自己觉得比较优雅的方式,欢迎各...

前言

有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),希望对大家有所帮助