React antd 输入框手机号邮箱校验

在使用React结合Ant Design（antd）时，进行输入框手机号和邮箱校验可以通过使用Ant Design提供的Form组件来实现。antd的Form组件提供了强大的表单验证功能，其中包括了对于手机号和邮箱的验证规则。下面是一个简单的示例，展示如何使用Form组件进行这两种校验：

首先，你需要安装并引入antd库到你的项目中：

npm install antd --save

然后在你的React组件中，可以这样使用Form组件进行校验：

import React from 'react';
import { Form, Input, Button, message } from 'antd';
import {手机号,邮箱} from 'antd/lib/validations/knownValidations';

const MyComponent = () => {
  const handleFormSubmit = (values) => {
    // 这里values包含了输入框中的数据，你可以进行进一步的处理
    console.log(values);
  };

  return (
    <Form onFinish={handleFormSubmit}>
      <Form.Item
        name="phone"
        label="手机号"
        rules={[
          {
            required: true,
            message: '请输入手机号!',
          },
          {
            validator: (_, value) => {
              if (手机号.test(value)) {
                return Promise.resolve();
              }
              return Promise.reject('手机号格式不正确');
            },
          },
        ]}
      >
        <Input placeholder="请输入手机号" />
      </Form.Item>
      
      <Form.Item
        name="email"
        label="邮箱"
        rules={[
          {
            required: true,
            message: '请输入邮箱!',
          },
          {
            type: 'email',
            message: '邮箱格式不正确!',
          },
        ]}
      >
        <Input placeholder="请输入邮箱" />
      </Form.Item>
      
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyComponent;

在这个示例中，我们使用了`Form.Item`组件包裹`Input`组件，并定义了`rules`属性来进行校验。对于手机号，我们使用了自定义的正则表达式规则，并通过`validator`进行校验；对于邮箱，我们直接使用了`type: 'email'`的方式来进行校验。如果校验未通过，将会在对应的`Input`组件下方显示相应的提示信息。