Vue ElementUi同時(shí)校驗(yàn)多個(gè)表單(巧用new promise)
前言
有ABCD四個(gè)表單,提交的時(shí)候同時(shí)校驗(yàn)(是的,后臺(tái)管理系統(tǒng)的需求就是這樣),巧用new promise。
實(shí)現(xiàn)的方法有很多種,我講下自己覺得比較優(yōu)雅的方式,歡迎各位大大的指正哈。
代碼
let formArr=['formA','formB','formC','formD']//假設(shè)這是四個(gè)form表單的ref
var resultArr=[]//用來(lái)接受返回結(jié)果的數(shù)組
var _self=this
function checkForm(formName) { //封裝驗(yàn)證表單的函數(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校驗(yàn)
checkForm(item)
})
Promise.all(resultArr).then(function() { //都通過(guò)了
alert('恭喜你,表單全部驗(yàn)證通過(guò)啦')
}).catch(function() {
console.log("err");
});
總結(jié)
以上所述是小編給大家介紹的Vue ElementUi同時(shí)校驗(yàn)多個(gè)表單(巧用new promise),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Vue如何使用ElementUI對(duì)表單元素進(jìn)行自定義校驗(yàn)及踩坑
- Vue?elementUI表單嵌套表格并對(duì)每行進(jìn)行校驗(yàn)詳解
- Vue之ElementUI Form表單校驗(yàn)
- vue elementUI 表單校驗(yàn)的實(shí)現(xiàn)代碼(多層嵌套)
- vue elementUI 表單校驗(yàn)功能之?dāng)?shù)組多層嵌套
- 基于Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)表單的校驗(yàn)功能(根據(jù)條件動(dòng)態(tài)切換校驗(yàn)格式)
- vue+elementUI多表單同時(shí)提交及表單校驗(yàn)最新解決方案
相關(guān)文章
Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式
這篇文章主要介紹了Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue-router 切換組件頁(yè)面時(shí)進(jìn)入進(jìn)出動(dòng)畫方法
今天小編就為大家分享一篇Vue-router 切換組件頁(yè)面時(shí)進(jìn)入進(jìn)出動(dòng)畫方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vite項(xiàng)目import.meta.env如何能獲取非VITE開發(fā)的環(huán)境變量
這篇文章主要介紹了vite項(xiàng)目import.meta.env如何能獲取非VITE開發(fā)的環(huán)境變量問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
使用websocket和Vue2中的props實(shí)時(shí)更新數(shù)據(jù)方式
這篇文章主要介紹了使用websocket和Vue2中的props實(shí)時(shí)更新數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
解決echarts echarts數(shù)據(jù)動(dòng)態(tài)更新和dataZoom被重置問(wèn)題
這篇文章主要介紹了解決echarts echarts數(shù)據(jù)動(dòng)態(tài)更新和dataZoom被重置問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue實(shí)現(xiàn)加載頁(yè)面自動(dòng)觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))
這篇文章主要介紹了vue實(shí)現(xiàn)加載頁(yè)面自動(dòng)觸發(fā)函數(shù)(及異步獲取數(shù)據(jù)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
Vue學(xué)習(xí)之路之登錄注冊(cè)實(shí)例代碼
本篇文章主要介紹了Vue學(xué)習(xí)之路之登錄注冊(cè)實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07

