antd 表单外提交进行规则校验

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

const MyForm = () => {
  const onFinish = (values) => {
    console.log('Form values:', values);
  };

  const validateFields = () => {
    form.validateFields()
      .then(() => {
        // 校验通过，执行相应操作
        console.log('Validation successful');
        onFinish(form.getFieldsValue());
      })
      .catch((error) => {
        // 校验失败，处理错误信息
        console.log('Validation error:', error)
      });
  };

  const [form] = Form.useForm();

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