ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题

前端贾公子2025-09-10 9:07

[方案一：循环调用 + Promise.all 合并结果](#方案一：循环调用 + Promise.all 合并结果)

方案二：直接传入数组字段

总结

在实际业务中，我们有时只需要对表单的部分字段进行校验。ElementUI 提供的 validateField 方法支持单个字段，也支持字段数组，但在使用时可能会遇到 多次回调 的情况。下面整理两种常见的写法。

方案一：循环调用 + `Promise.all` 合并结果

通过手动循环每个字段，调用 validateField，并用 Promise.all 等待所有校验完成。这样我们可以在 一次回调里拿到所有结果。

复制代码

async handleSearchRoles() {
  const fieldsToValidate = ['shopId', 'channel']
  const _self = this

  Promise.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 = false
      this.$message.error("校验不通过，这里会触发多次！")
    }
  }
)

if (enable) {
  console.log("校验通过，继续执行逻辑")
}

⚠️ 问题：

回调会被执行多次（每个字段一次）。
如果回调里有发送请求、弹窗提示等逻辑，就会重复触发。

总结

方案一 （循环 + Promise.all）适合需要明确控制逻辑、避免重复执行的场景。
方案二（直接传数组）写法简单，但回调会执行多次，需要额外处理避免重复逻辑。

👉 一般推荐使用 方案一，更符合"只执行一次最终逻辑"的需求。