vue實現多個el-form表單提交統(tǒng)一校驗的2個方法
通過以下兩種方法實現多個表單的統(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 表單數組,依次對每個表單進行校驗
export default { data() { return { // 數組用來存儲所有表單的 ref 值 formRefs: [ 'form1', 'form2' ], form1: {}, form2: {}, rules1: {}, rules2: {} } }, methods: { submit() { // 標記所有表單是否通過校驗的變量 let isValid = true // 遍歷表單數組,依次對每個表單進行校驗 this.formRefs.forEach(ref => { this.$refs[ref].validate(valid => { if (!valid) { isValid = false } }) }} // 如果所有表單都校驗通過,執(zhí)行提交操作 if (isValid) { // 執(zhí)行提交操作 } } } }
總結
到此這篇關于vue實現多個el-form表單提交統(tǒng)一校驗的2個方法的文章就介紹到這了,更多相關vue el-form表單提交統(tǒng)一校驗內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
element-ui修改el-form-item樣式的詳細示例
在使用element-ui組件庫的時候經常需要修改原有樣式,下面這篇文章主要給大家介紹了關于element-ui修改el-form-item樣式的詳細示例,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11vue-simple-uploader上傳成功之后的response獲取代碼
這篇文章主要介紹了vue-simple-uploader上傳成功之后的response獲取代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧~2020-09-09Vue表單驗證?trigger:'blur'OR?trigger:'change&ap
利用?elementUI?實現表單元素校驗時,出現下拉框內容選中后校驗不消失的異常校驗情形,這篇文章主要介紹了Vue表單驗證?trigger:‘blur‘?OR?trigger:‘change‘?區(qū)別,需要的朋友可以參考下2023-09-09Vue使用pdf.js和docx-preview實現docx和pdf的在線預覽
這篇文章主要為大家詳細介紹了在Vue中使用pdf.js和docx-preview實現docx和pdf的在線預覽的相關知識,文中的示例代碼講解詳細,需要的可以參考下2025-03-03