React antd 表单输入框 手机号、邮箱 格式验证

在使用React结合Ant Design（antd）库开发表单时，对于输入框的格式验证是一项常见的需求，尤其对于手机号和邮箱这样的字段，客户端的格式验证能够提升用户体验，确保输入的数据符合预期格式。以下是如何使用antd的Form组件和ValidateRule规则来实现手机号和邮箱格式验证的基本方法：

1. 首先，需要安装并引入antd库：

   npm install antd

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

2. 在组件中使用`Form`包裹表单元素，并为需要验证的`Input`组件添加`rules`属性。在`rules`数组中定义具体的验证规则，例如手机号和邮箱：

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

     const phoneRule = {
       required: true,
       message: '请输入手机号!',
       pattern: new RegExp('^1[3-9]\\d{9}$'), // 简单的手机号验证正则表达式
     };

     const emailRule = {
       required: true,
       message: '请输入邮箱!',
       type: 'email', // 根据antd的内置规则检查邮箱格式
     };

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

     const onFinishFailed = (errorInfo) => {
       console.log('Failed:', errorInfo);
     };

     return (
       <Form
         form={form}
         onFinish={onFinish}
         onFinishFailed={onFinishFailed}
         validateTrigger="onBlur"
       >
         <Form.Item
           name="phone"
           label="手机号"
           rules={[phoneRule]}
         >
           <Input placeholder="请输入手机号" />
         </Form.Item>
         <Form.Item
           name="email"
           label="邮箱"
           rules={[emailRule]}
         >
           <Input placeholder="请输入邮箱" />
         </Form.Item>
         <Form.Item>
           <button type="submit">提交</button>
         </Form.Item>
       </Form>
     );
   };

在这个例子中，`phoneRule`定义了手机号的验证规则，其中`pattern`属性使用了正则表达式进行匹配。`emailRule`则使用了antd内置的`type: 'email'`来进行邮箱格式的验证。

需要注意的是，前端验证仅作为初步检查，后端也需要对输入数据进行格式和安全性验证。