Vue3 + Vuelidate表单验证异常求助：填写后仍提示错误

你的代码存在两个核心问题，导致验证逻辑异常：

1. v-model 绑定错误 #

模板中 input 的 v-model="name" 没有对应的数据变量，你定义的表单数据是 formData ref 对象，正确的绑定应该是 v-model="formData.name"。

2. 错误信息未正确渲染 #

当前代码没有在模板中展示验证错误，同时提交逻辑里对 v$ 的调用可以简化。

修复后的完整代码 #

模板部分：

<form @submit.prevent="submitForm">
  <input 
    v-model="formData.name" 
    type="text" 
  />
  <!-- 显示必填错误 -->
  <span v-if="v$.name.$error" style="color: red;">姓名不能为空</span>
  <button type="submit">Submit</button>
</form>

Script 部分：

<script setup>
import { ref } from 'vue'
import { useVuelidate } from '@vuelidate/core'
import { required } from "@vuelidate/validators"

const formData = ref({
  name: ''
})
const rules = {
  name: { required }
}
// useVuelidate 返回的是 Ref，直接赋值给 v$ 即可
const v$ = useVuelidate(rules, formData);

const submitForm = async () => {
  // 直接调用 v$.$validate()，无需 .value
  const result = await v$.$validate();
  if (result) {
    alert('success')
  } else {
    alert('error')
  }
}
</script>

关键说明 #

• 确保表单数据和模板绑定一致，formData 是响应式对象，必须通过 formData.name 访问属性
• useVuelidate 返回的是一个 Ref 对象，调用验证方法时直接用 v$.$validate()，不需要额外取 .value
• 通过 v$.name.$error 可以判断该字段是否验证失败，结合 v-if 即可渲染错误提示

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