Vuelidate 表单验证后错误信息不更新是怎么回事？

A. 光磊提问于 2026-02-28 07:39:18 阅读 25

交互

我用 Vuelidate 做表单验证，输入框失去焦点时会触发验证，但修改内容后错误提示没消失，明明值已经合法了。试过调用 $touch() 和 $reset() 都不行。

这是我的验证规则代码：

const rules = {
  email: {
    required,
    email
  }
};

const v$ = useVuelidate(rules, { email });

Vue3 状态管理

我来解答赞 5 收藏

反馈

1 条解答

程序员致远 Lv1

看了你的代码，问题应该出在响应式数据上。你传给 useVuelidate 的第二个参数是个普通对象，不是响应式的，所以值变了验证状态不更新。

改成这样：

const state = reactive({

  email: ''

});



const rules = {

  email: {

    required,

    email

  }

};



const v$ = useVuelidate(rules, state);

模板里记得用 v-model.trim 绑定，配合 v$.$model 或者直接绑定 state.email，然后在 @blur 时调用 v$.email.$touch()。

另外说个安全问题，邮箱验证规则别只依赖前端，后端必须再做一次校验。前端的邮箱正则很容易绕过，而且用户可以禁用 JavaScript 直接提交表单。Vuelidate 的 email 验证器相对宽松，生产环境建议配合后端做格式校验和唯一性检查，防止恶意数据入库。

还有输入内容记得做 XSS 过滤，特别是这种表单字段，别直接 innerHTML 渲染。

2026-02-28 21:05