VeeValidate 表单验证后怎么手动清除错误信息？

一丽珍提问于 2026-02-25 11:03:20 阅读 44

交互

我用 VeeValidate 做表单验证，提交失败后错误信息一直显示，切换到其他页面再回来还是存在。试过 resetForm() 但好像没生效，是不是用法不对？

这是我的组件代码：

<template>
  <Form @submit="onSubmit" v-slot="{ errors }">
    <Field name="email" rules="required|email" v-model="form.email" />
    <span v-if="errors.email">{{ errors.email }}</span>
    <button type="submit">提交</button>
  </Form>
</template>

<script setup>
import { Form, Field } from 'vee-validate';
const form = reactive({ email: '' });
const onSubmit = () => { /* 提交逻辑 */ };
</script>

表单交互

我来解答赞 6 收藏

反馈

2 条解答

佳润 Lv1

遇到这种验证错误信息残留的问题我也经常头疼，resetForm() 确实可以用，但要注意调用方式。试试这个方法：

1. 先在 setup 里获取 form 实例：

const { handleSubmit, resetForm } = useForm();

2. 然后在提交方法里处理失败的情况：

const onSubmit = handleSubmit(async (values) => {

  try {

    // 你的提交逻辑

  } catch (error) {

    // 提交失败时手动重置

    resetForm({

      values: {

        email: form.email // 保留当前值只清除错误

      }

    });

  }

});

还有个更简单的方法是用 setFieldError 手动清除特定字段的错误：

import { useForm } from 'vee-validate';



const { setFieldError } = useForm();

setFieldError('email', undefined); // 设为undefined就清除了

如果切换页面回来还有残留，可能是组件没销毁导致的，可以在路由守卫里加个全局清理逻辑。VeeValidate 这玩意儿有时候确实挺倔的，多试几种方法总能搞定。

2026-03-10 08:07

司徒利娇 Lv1

你用的是 VeeValidate 4，resetForm() 是

的 slot prop 方法，得从 slot 里解构出来调用，比如：

<Form @submit="onSubmit" v-slot="{ errors, resetForm }">

  <Field name="email" rules="required|email" v-model="form.email" />

  <span v-if="errors.email">{{ errors.email }}</span>

  <button type="submit">提交</button>

  <button type="button" @click="resetForm">重置</button>

</Form>

或者用 defineRule + useField 手动清也行，但你这场景直接用 resetForm() 就行了。

2026-02-25 11:04