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

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

交互

我用 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>

表单交互

我来解答赞 3 收藏

反馈

1 条解答

司徒利娇 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