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

东方玉戈 阅读 10

我在用 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>
我来解答 赞 1 收藏
二维码
手机扫码查看
1 条解答
♫俊涵
♫俊涵 Lv1
你的问题大概率是没有给 Form 绑定 data。TDesign 的表单校验依赖数据绑定,不绑数据模型的话,校验根本跑不起来。

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

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





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

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

希望能帮到你。
点赞
2026-03-17 20:44