ant design form如何触发表单验证

您可以在表单的提交事件中调用validateFields方法来触发表单的验证。具体方法如下：

1. 在表单组件中引入Form组件。

2. 在表单的submit事件中，使用Form组件的validateFields方法来进行表单验证。

3. 在validateFields方法中，可以传入一个回调函数，用于在验证结束后处理表单数据。

示例代码如下：

import { Form, Input, Button } from 'antd';
import { useState } from 'react';

const Demo = () => {
const [form] = Form.useForm();
const [submitting, setSubmitting] = useState(false);

const handleSubmit = () => {
form
.validateFields()
.then(values => {
//验证通过后的表单数据处理
console.log('submitting', values);
setSubmitting(true);
})
.catch(error => {});
};

return (
<Form form={form}>
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
message: 'Please input your username!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
>
<Input.Password />
</Form.Item>
<Form.Item>
<Button disabled={submitting} onClick={handleSubmit}>
Submit
</Button>
</Form.Item>
</Form>
);
};

export default Demo;