目錄
方案一：循環調用 + Promise.all 合并結果
方案二：直接傳入數組字段
總結
在實際業務中，我們有時只需要對表單的部分字段進行校驗。ElementUI 提供的 validateField 方法支持單個字段，也支持字段數組，但在使用時可能會遇到 多次回調 的情況。下面整理兩種常見的寫法。
方案一：循環調用 + Promise.all 合并結果
通過手動循環每個字段，調用 validateField，并用 Promise.all 等待所有校驗完成。這樣我們可以在 一次回調里拿到所有結果。
async handleSearchRoles() {const fieldsToValidate = ['shopId', 'channel']const _self = thisPromise.all(fieldsToValidate.map(item => {return new Promise(resolve => {_self.$refs['form'].validateField(item, (error) => {resolve(error) // error 為空串表示校驗通過})})})).then(data => {console.info(data) // 每個字段的校驗結果組成的數組// 只要有一個字段報錯，就視為校驗失敗if (data.some(item => item)) {return}// 所有字段都通過console.log("校驗通過，繼續執行邏輯")})
}
? 特點：
-
最終邏輯只執行一次。
-
可以拿到所有字段的校驗結果。
方案二：直接傳入數組字段
ElementUI 的 validateField 也支持直接傳入數組形式的字段名。但需要注意：每個字段校驗完成后都會調用一次回調。
let enable = true
this.$refs.ruleForm.validateField(["username", "telephone"],(errorMessage, data) => {if (data) {enable = falsethis.$message.error("校驗不通過，這里會觸發多次！")}}
)if (enable) {console.log("校驗通過，繼續執行邏輯")
}
?? 問題：
-
回調會被執行多次（每個字段一次）。
-
如果回調里有發送請求、彈窗提示等邏輯，就會重復觸發。
總結
-
方案一（循環 +
Promise.all）適合需要明確控制邏輯、避免重復執行的場景。 -
方案二（直接傳數組）寫法簡單，但回調會執行多次，需要額外處理避免重復邏輯。
👉 一般推薦使用 方案一，更符合“只執行一次最終邏輯”的需求。
