antd中校验input输入电话号码是否合规

在Ant Design (antd) 中，你可以利用其提供的表单组件 `Form` 和内置的验证规则来自定义输入电话号码的校验。以下是一个简单的示例：

首先，在`Form.Item` 中，你需要创建一个`rules`属性，然后添加一个针对电话号码格式的验证规则。你可以使用正则表达式来匹配常见的电话号码格式。例如，对于中国大陆手机号码的验证，可以使用如下的规则：

import { Form, Input, Button, message } from 'antd';
const { RegExpRule } = Form.Validator; // 引入验证规则

const validatePhone = (rule, value, callback) => {
  const pattern = /^1[3456789]\d{9}$/; // 正则表达式，匹配中国大陆手机号码格式
  if (!pattern.test(value)) {
    callback(new Error('请输入有效的手机号码'));
  } else {
    callback();
  }
};

const onFinish = (values) => {
  console.log('Received values of form: ', values);
  // 如果验证通过，可以进一步处理数据
};

const formLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

ReactDOM.render(
  <Form
    layout={formLayout}
    onFinish={onFinish}
  >
    <Form.Item
      name="phoneNumber"
      rules={[
        {
          type: 'regex',
          pattern: /^[1][3-9]\d{9}$/,
          message: '请输入有效的手机号码',
          whitespace: true,
          enforceRequired: true,
          validateFirst: true, // 验证优先级提高
        },
      ]}
    >
      <Input />
    </Form.Item>
    <Form.Item wrapperCol={{ offset: 6 }}>
      <Button type="primary" htmlType="submit">
        提交
      </Button>
    </Form.Item>
  </Form>,
  document.getElementById('container'),
);

在这个例子中，如果用户输入的不是有效的手机号码，会显示错误消息。如果你想对其他国家的电话号码格式进行验证，需要修改正则表达式以适应相应格式。