vue實現(xiàn)多個el-form表單提交統(tǒng)一校驗的2個方法
更新時間：2023年07月12日 11:00:11 作者：穿貂_
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)多個el-form表單提交統(tǒng)一校驗的2個方法,文中通過代碼示例介紹的非常詳細,對大家學(xué)習(xí)或使用vue具有一定的參考借鑒價值,需要的朋友可以參考下
通過以下兩種方法實現(xiàn)多個表單的統(tǒng)一校驗：
1. 定義模板內(nèi)容
在 el-form 表單中添加 ref 屬性來獲取表單組件對象
<template>
<div>
<el-form ref="form1" :rules="rules1">
<!-- 表單內(nèi)容 -->
</el-form>
<el-form ref="form2" :rules="rules2">
<!-- 表單內(nèi)容 -->
</el-form>
<el-button @click="submit">提交</el-button>
</div>
</template>2. 方法一
在上述代碼中，我們給每個 el-form 表單添加了 ref 屬性，分別為 form1 和 form2，在 submit 方法中，分別對兩個表單使用 validate 方法進行表單校驗
export default {
data() {
return {
form1: {},
form2: {},
rules1: {},
rules2: {}
}
},
methods: {
submit() {
const form1Valid = this.$refs.form1.validate()
const form2Valid = this.$refs.form2.validate()
if (form1Valid && form2Valid) {
// 統(tǒng)一提交表單
}
}
}
}3. 方法二
在上述代碼中，我們給每個 el-form 表單添加了 ref 屬性，在 submit 方法中，遍歷 formRefs 表單數(shù)組，依次對每個表單進行校驗
export default {
data() {
return {
// 數(shù)組用來存儲所有表單的 ref 值
formRefs: [ 'form1', 'form2' ],
form1: {},
form2: {},
rules1: {},
rules2: {}
}
},
methods: {
submit() {
// 標(biāo)記所有表單是否通過校驗的變量
let isValid = true
// 遍歷表單數(shù)組，依次對每個表單進行校驗
this.formRefs.forEach(ref => {
this.$refs[ref].validate(valid => {
if (!valid) {
isValid = false
}
})
}}
// 如果所有表單都校驗通過，執(zhí)行提交操作
if (isValid) {
// 執(zhí)行提交操作
}
}
}
}總結(jié)
到此這篇關(guān)于vue實現(xiàn)多個el-form表單提交統(tǒng)一校驗的2個方法的文章就介紹到這了,更多相關(guān)vue el-form表單提交統(tǒng)一校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue鍵盤事件keyup、keydown的作用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了vue組件暴露和.js文件暴露接口操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細介紹了vue使用element-ui實現(xiàn)表單驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
今天小編就為大家分享一篇Vue中對拿到的數(shù)據(jù)進行A-Z排序的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue中如何使用math.js問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue?ElementUI?table實現(xiàn)雙擊修改編輯某個內(nèi)容的方法
在實現(xiàn)表格單元格雙擊編輯功能時,需使用@cell-dblclick事件來觸發(fā)雙擊操作,將單元格切換為input輸入框,通過ref引用和綁定失焦及回車事件來確認(rèn)編輯,同時,需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善2024-09-09
Vue0.1的過濾代碼如何添加到Vue2.0直接使用，這篇文章主要介紹了過濾代碼添加到Vue2.0用的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
詳解vuex數(shù)據(jù)傳輸?shù)膬煞N方式及this.$store undefined的解決辦法
這篇文章主要介紹了vuex數(shù)據(jù)傳輸?shù)膬煞N方式 及 this.$store undefined的解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí)
這篇文章主要為大家介紹了Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了Element Alert警告的具體使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07