TDesign 表单校验不生效是怎么回事？

东方玉戈提问于 2026-03-17 16:15:18 阅读 64

组件

我在用 TDesign 的 Form 组件做表单校验，rules 也配了，但提交时根本没触发校验，直接就通过了。明明字段是必填的，却一点提示都没有。

我试过把 rules 写在 FormItem 上，也试过用 formRef.value.validate() 手动触发，都不行。控制台也没报错，就是静默跳过了。代码大概是这样：

const rules = {
  username: [{ required: true, message: '用户名不能为空' }]
};
// 模板里 <t-form :rules="rules"><t-form-item name="username">...</t-form-item></t-form>

我来解答赞 12 收藏

反馈

2 条解答

a'ゞ艳雯 Lv1

看起来是规则绑定的问题。官方文档里说，:rules 属性应该直接绑定到具体的 <t-form-item> 上面，而不是整个表单组件。

试试这样修改：

<t-form>

  <t-form-item name="username" :rules="[{ required: true, message: '用户名不能为空' }]">

    <!-- 输入框内容 -->

  </t-form-item>

</t-form>

另外记得检查你的 formRef 绑定是否正确，我以前就遇到过因为 ref 写错了导致 validate() 方法调用失败的情况。确保在 setup 或者 onMounted 钩子里面正确获取到了 form 实例。

最后确认下 TDesign 的版本号，不同版本的校验机制可能有差异，最好看看当前版本的更新日志有没有相关的变更说明。这玩意有时候真能折腾人。

2026-03-30 03:01

♫俊涵 Lv1

你的问题大概率是没有给 Form 绑定 data。TDesign 的表单校验依赖数据绑定，不绑数据模型的话，校验根本跑不起来。

检查一下你的代码里有没有写 :data="formData" 或者 :model="formData" 这种绑定。

给你一个完整的正确写法：

关键点就两个：一个是 Form 上必须加 :data="formData"，另一个是 FormItem 的 name 要和 rules 的 key 对上。

如果你是用按钮直接提交而不是失焦触发，记得把 rules 里的 trigger 加上 'blur' 或者改成 'change'，要不然得等用户手动触发失焦才会校验。

希望能帮到你。

2026-03-17 20:44