欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue ElementUi同時校驗多個表單(巧用new promise)

 更新時間：2018年06月06日 11:41:53   作者：大師兄  
這篇文章主要介紹了巧用new promise實現(xiàn)Vue ElementUi同時校驗多個表單功能，實現(xiàn)的方法有很多種，本文給大家?guī)淼氖且环N比較完美的方案,需要的朋友可以參考下

前言

有ABCD四個表單，提交的時候同時校驗(是的，后臺管理系統(tǒng)的需求就是這樣)，巧用new promise。

實現(xiàn)的方法有很多種，我講下自己覺得比較優(yōu)雅的方式，歡迎各位大大的指正哈。

代碼

let formArr=['formA','formB','formC','formD']//假設(shè)這是四個form表單的ref
var resultArr=[]//用來接受返回結(jié)果的數(shù)組
var _self=this
 function checkForm(formName) { //封裝驗證表單的函數(shù)
  var result = new Promise(function(resolve, reject) {
    _self.$refs[formName].validate((valid) => {
      if (valid) {
        resolve();
      } else { reject() }
    })
  })
  resultArr.push(result) //push 得到promise的結(jié)果
}
formArr.forEach(item => { //根據(jù)表單的ref校驗
    checkForm(item)
 })
Promise.all(resultArr).then(function() { //都通過了
  alert('恭喜你，表單全部驗證通過啦')
}).catch(function() {
  console.log("err");
});

總結(jié)

以上所述是小編給大家介紹的Vue ElementUi同時校驗多個表單(巧用new promise)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論