Vue3组合式API中Vuelidate如何仅提交无错时重置清空表单

你遇到的两个问题根因如下：

• 校验不通过也触发$reset()：如果你的校验规则里存在异步校验逻辑（比如远程查重），v$.value.$validate()会返回Promise对象而非同步布尔值。你没有用await接收校验结果，直接判断Promise对象时，对象本身为真值，导致!v$.value.$validate()永远为false，错误分支的return永远不触发，后续重置逻辑会无条件执行。
• 清空表单时弹出错误提示：你先调用$reset()再修改表单值，Vuelidate监听到表单值变更后会自动重新执行校验，空值不符合规则（比如必填校验）就会触发错误提示，此时已经执行过$reset()，错误状态会被保留。

推荐用暂停校验监听的方式实现，完全不会出现错误提示闪现的问题，兼容所有同步/异步校验场景：

1. 将提交方法改为async函数，用await接收$validate()的真实返回值，保证分支判断逻辑正确
2. 表单提交成功后，先暂停Vuelidate的变更监听，避免修改表单值时自动触发校验
3. 清空表单字段、重置校验状态完成后，再恢复校验监听

实现代码 #

import { reactive } from 'vue'

// 建议提前存好表单初始值，避免非字符串字段清空时类型错误
const getInitialForm = () => ({
  // 替换成你自己的表单字段和对应初始值
  username: '',
  password: '',
  // 数字、数组类字段不要设为空字符串，对应设置类型匹配的初始值
  age: null,
  tags: []
})
const form = reactive(getInitialForm())

const submitForm = async () => {
  // 等待校验完成，拿到真实校验结果，兼容同步/异步规则
  const isValid = await v$.value.$validate()
  if (!isValid) {
    console.log('表单校验未通过', form)
    return
  }

  try {
    // 这里替换成你的接口请求逻辑
    // await axios.post('/your/api', form)
    console.log('提交成功', form)

    // 暂停Vuelidate的变更监听，修改表单值时不会触发校验
    v$.value.$pause()
    // 重置表单为初始值
    Object.keys(form).forEach(key => {
      form[key] = getInitialForm()[key]
    })
    // 重置Vuelidate校验状态，清除所有$dirty、$error标记
    v$.value.$reset()
    // 恢复校验监听
    v$.value.$resume()
  } catch (err) {
    console.error('提交失败', err)
  }
}

如果你的Vuelidate版本较低不支持$pause()/$resume()方法，可以用nextTick方案替代，调整执行顺序即可：

import { reactive, nextTick } from 'vue'

const getInitialForm = () => ({
  username: '',
  password: ''
})
const form = reactive(getInitialForm())

const submitForm = async () => {
  const isValid = await v$.value.$validate()
  if (!isValid) {
    console.log('表单校验未通过', form)
    return
  }

  try {
    // await axios.post('/your/api', form)
    console.log('提交成功', form)

    // 先修改表单值
    Object.keys(form).forEach(key => {
      form[key] = getInitialForm()[key]
    })
    // 等待值变更触发的校验完成、DOM更新后，再重置校验状态
    await nextTick()
    v$.value.$reset()
  } catch (err) {
    console.error('提交失败', err)
  }
}

• 不要把所有表单字段统一设为空字符串，数字、数组、日期类字段要对应设置初始值，避免出现类型错误导致校验异常
• 即使当前表单全是同步校验规则，也建议加await调用$validate()，避免后续新增异步校验规则时出现逻辑bug，写法上也更统一

内容的提问来源于stack exchange，提问作者thiebo