目錄1. 定義模板內容2. 方法一3. 方法二總結

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

1. 定義模板內容

在 el-form 表單中添加 ref 屬性來獲取表單組件對象

<template> <div> <el-form ref='form1' :rules='rules1'> <!-- 表單內容 --> </el-form> <el-form ref='form2' :rules='rules2'> <!-- 表單內容 --> </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() { // 標記所有表單是否通過校驗的變量 let isValid = true // 遍歷表單數(shù)組，依次對每個表單進行校驗 this.formRefs.forEach(ref => { this.$refs[ref].validate(valid => { if (!valid) { isValid = false } }) }} // 如果所有表單都校驗通過，執(zhí)行提交操作 if (isValid) { // 執(zhí)行提交操作 } } }}總結

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