目錄1. 定義模板內(nèi)容2. 方法一3. 方法二總結(jié)

通過(guò)以下兩種方法實(shí)現(xiàn)多個(gè)表單的統(tǒng)一校驗(yàn)：

1. 定義模板內(nèi)容

在 el-form 表單中添加 ref 屬性來(lái)獲取表單組件對(duì)象

<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. 方法一

在上述代碼中，我們給每個(gè) el-form 表單添加了 ref 屬性，分別為 form1 和 form2，在 submit 方法中，分別對(duì)兩個(gè)表單使用 validate 方法進(jìn)行表單校驗(yàn)

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. 方法二

在上述代碼中，我們給每個(gè) el-form 表單添加了 ref 屬性，在 submit 方法中，遍歷 formRefs 表單數(shù)組，依次對(duì)每個(gè)表單進(jìn)行校驗(yàn)

export default { data() { return { // 數(shù)組用來(lái)存儲(chǔ)所有表單的 ref 值 formRefs: [ 'form1', 'form2' ], form1: {}, form2: {}, rules1: {}, rules2: {} } }, methods: { submit() { // 標(biāo)記所有表單是否通過(guò)校驗(yàn)的變量 let isValid = true // 遍歷表單數(shù)組，依次對(duì)每個(gè)表單進(jìn)行校驗(yàn) this.formRefs.forEach(ref => { this.$refs[ref].validate(valid => { if (!valid) { isValid = false } }) }} // 如果所有表單都校驗(yàn)通過(guò)，執(zhí)行提交操作 if (isValid) { // 執(zhí)行提交操作 } } }}總結(jié)

到此這篇關(guān)于vue實(shí)現(xiàn)多個(gè)el-form表單提交統(tǒng)一校驗(yàn)的2個(gè)方法的文章就介紹到這了,更多相關(guān)vue el-form表單提交統(tǒng)一校驗(yàn)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！