antd Form 验证手机号

你可以使用 antd 的 Form 组件来验证手机号码。具体实现步骤如下：

1. 引入 Form、Input 和 Button 组件

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

2. 在 Form 组件中添加 Input 组件

<Form>
  <Form.Item
    name="phone"
    label="手机号"
    rules={[
      {
        required: true,
        message: '请输入手机号',
      },
      {
        pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,
        message: '手机号格式不正确',
      },
    ]}
  >
    <Input placeholder="请输入手机号" />
  </Form.Item>
  <Form.Item>
    <Button type="primary" htmlType="submit">
      提交
    </Button>
  </Form.Item>
</Form>

3. 在 rules 中添加验证规则

在 rules 中设置 required 为 true，表示该字段为必填项。同时，使用正则表达式来验证手机号格式是否正确。

4. 提交表单

当用户提交表单时，antd 会自动验证表单中的数据。如果数据验证通过，会触发 onFinish 回调函数，你可以在该函数中进行表单提交操作。

<Form onFinish={onFinish}>
  ...
</Form>

const onFinish = (values) => {
  console.log(values);
};

其中，values 就是表单中的数据。你可以在 onFinish 回调函数中将数据提交到后端等操作。