使用Antd验证手机号时type="number"不生效，求解决方案

你当前的手机号验证无效，核心问题在于用type: "number"来校验手机号，这不符合手机号的实际使用场景，具体修正方法如下：

问题根源 #

手机号本质是字符串类型，用type: "number"会带来两个关键问题：

• 无法保留可能存在的前导零
• 无法校验手机号的格式规则（比如必须是11位数字、开头为特定区间的数字）

具体修正步骤 #

1. 替换type: "number"为正则匹配规则，精准校验手机号格式
2. 使用普通Input组件而非InputNumber，避免数字输入组件的自动格式化干扰

修正后的代码示例：

<Form.Item
  label="手机号"
  name="phone"
  rules={[
    {
      required: true,
      message: '请输入您的手机号！',
    },
    {
      // 匹配中国大陆标准手机号：1开头，第二位3-9，后续9位数字
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入有效的手机号！',
    },
  ]}
>
  <Input placeholder="请输入手机号" />
</Form.Item>

补充说明 #

如果需要支持其他地区的手机号，可以调整正则表达式。比如要允许带国际区号，可修改正则为/^\+?\d{1,3}[- ]?\d{10,15}$/（可根据实际需求进一步调整）。

内容的提问来源于stack exchange，提问作者Rasha Hasoon