目录
方案一：循环调用 + 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）适合需要明确控制逻辑、避免重复执行的场景。 -
方案二（直接传数组）写法简单，但回调会执行多次，需要额外处理避免重复逻辑。
👉 一般推荐使用 方案一，更符合“只执行一次最终逻辑”的需求。
