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)文章
Vue.js基礎(chǔ)指令實例講解(各種數(shù)據(jù)綁定、表單渲染大總結(jié))
這篇文章主要為大家詳細介紹了Vue.js基礎(chǔ)指令實例，各種數(shù)據(jù)綁定、表單渲染大總結(jié)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
我們在Vue.js項目中經(jīng)常需要引用圖片,所以下面這篇文章主要介紹了關(guān)于在Vue頁面中如何更優(yōu)雅地引入圖片的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2021-12-12
本篇文章給大家分享了vue v-model動態(tài)生成的相關(guān)知識點以及實例代碼，有興趣的朋友參考學(xué)習(xí)下。2018-06-06
這篇文章主要介紹了vue3項目引入pinia報錯的簡單解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue開發(fā)之封裝分頁組件與使用,結(jié)合實例形式分析了vue.js封裝分頁組件操作以及使用組件進行分頁的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-04-04
本篇文章主要介紹了如何去除vue項目中的#及其ie9兼容性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
element-ui中如何給el-table的某一行或某一列加樣式
本文主要介紹了element-ui中怎么給el-table的某一行或某一列加樣式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
響應(yīng)式就是當(dāng)對象本身(對象的增刪值)或者對象屬性(重新賦值)發(fā)生變化時,將會運行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue項目中使用Hbuilder打包app 設(shè)置沉浸式狀態(tài)欄的方法
這篇文章主要介紹了vue項目 使用Hbuilder打包app 設(shè)置沉浸式狀態(tài)欄的方法，本文通過實例代碼效果圖展示給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
雙向數(shù)據(jù)綁定原理主要運用了發(fā)布訂閱模式來實現(xiàn)的，通過Object.defineProperty對數(shù)據(jù)劫持，觸發(fā)getter，setter方法，這篇文章主要介紹了vue2.x雙向數(shù)據(jù)綁定原理,需要的朋友可以參考下2023-02-02