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

打工人一可提问于 2026-03-17 13:38:22 阅读 58

组件

我用 TDesign 的 Form 组件做表单校验，但明明设置了 rules，提交时却完全没触发校验，直接就通过了，这是啥情况？

我试过把 required 设成 true，也检查了字段名和 model 一致，但还是不行。控制台也没报错，就是静默跳过了校验。

const formRules = {
  email: [{ required: true, message: '请输入邮箱' }]
};

// JSX 中
<Form form={form} rules={formRules}>
  <FormItem name="email">
    <Input placeholder="请输入邮箱" />
  </FormItem>
</Form>

TDesign 企业级组件

我来解答赞 6 收藏

反馈

2 条解答

ლ舒昕 Lv1

看你的代码，问题可能出在 Form 组件的 rules 属性写法上。TDesign 通常要求通过 form.setRules() 方法来设置校验规则，而不是直接通过 rules 属性。

试试这样改：

const formRef = useRef();



useEffect(() => {

  if (formRef.current) {

    formRef.current.setRules({

      email: [{ required: true, message: '请输入邮箱' }]

    });

  }

}, []);



return (

  <Form ref={formRef}>

    <FormItem name="email">

      <Input placeholder="请输入邮箱" />

    </FormItem>

  </Form>

);

另外提醒下，做校验时要注意输入格式的安全性。比如邮箱校验最好加上正则表达式，防止用户输入恶意内容。像这样：

email: [

  { required: true, message: '请输入邮箱' },

  { pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.[a-zA-Z0-9]{2,6}$/, 

    message: '邮箱格式不正确'

  }

]

这不仅能提升用户体验，还能减少潜在的安全风险。开发这些功能的时候确实得多个心眼，不然容易埋坑。

2026-03-27 10:03

W″立顺 Lv1

问题很简单：你没在提交时调用 form.validate() 就直接提交了。TDesign 的校验不会自动触发，必须手动调用。

const handleSubmit = async () => {

  const result = await form.validate();

  if (result === true) {

    // 校验通过，提交数据

  }

};



// 或者用 onSubmit 事件

另外提醒一下，Form 组件还需要传 data 属性绑定数据模型，不然校验也跑不起来：

2026-03-17 14:06