react中的ant design中的form表单增加正则校验

在Ant Design中的Form表单中，可以使用`rules`属性来进行正则校验。具体实现步骤如下：

1. 在需要进行校验的表单项中，设置`rules`属性，值为一个数组，数组中每个元素为一个校验规则对象，校验规则对象包括`pattern`属性和`message`属性，分别表示正则表达式和校验失败的提示信息。例如：

<Form.Item
  label="用户名"
  name="username"
  rules={[
    {
      pattern: /^[a-zA-Z0-9_]{4,16}$/,
      message: '用户名必须由4-16位字母、数字或下划线组成',
    },
  ]}
>
  <Input />
</Form.Item>

2. 在表单提交时进行校验。可以通过`validateFields`方法来获取所有表单项的值，并进行校验。如果校验通过，执行提交操作；否则，提示用户校验失败的原因。例如：

const onFinish = (values) => {
  form
    .validateFields()
    .then(() => {
      // 校验通过，执行提交操作
      console.log('提交表单：', values);
    })
    .catch((errorInfo) => {
      // 校验失败，提示用户
      console.log('校验失败：', errorInfo);
    });
};

注意：在使用`validateFields`方法时，需要将表单组件用`Form.useForm`包装起来，并将`form`对象传递给表单组件的`form`属性。例如：

const MyForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    form
      .validateFields()
      .then(() => {
        // 校验通过，执行提交操作
        console.log('提交表单：', values);
      })
      .catch((errorInfo) => {
        // 校验失败，提示用户
        console.log('校验失败：', errorInfo);
      });
  };

  return (
    <Form form={form} onFinish={onFinish}>
      {/* ... */}
    </Form>
  );
};