为何在Antd Form规则中添加type: number后验证异常？

你的问题出在Input组件输入值的类型与验证规则不匹配：Input默认返回字符串类型，而type: 'number'规则要求值必须是Number类型——哪怕你输入纯数字，它依然是字符串格式，导致验证始终不通过，错误提示无法消失，表单也提交不了。

下面是几种针对性的解决办法：

方法1：改用InputNumber组件 #

InputNumber组件会自动将输入内容转为数字类型，完美匹配type: 'number'的验证规则：

<Form.Item
  name='userToken'
  label='User Token'
  rules={[
    validateForm,
    {
      type: 'number',
      len: 5,
      message: 'User Token must be 5 numbers long!'
    }
  ]}
>
  <InputNumber />
</Form.Item>

方法2：保留Input组件，添加类型转换 #

如果必须使用Input，可以在验证规则里通过transform函数将字符串转为数字，让规则能正确识别：

<Form.Item
  name='userToken'
  label='User Token'
  rules={[
    validateForm,
    {
      type: 'number',
      len: 5,
      message: 'User Token must be 5 numbers long!',
      // 将输入的字符串转为数字，空值则返回undefined
      transform: (value) => value ? Number(value) : undefined
    }
  ]}
>
  <Input />
</Form.Item>

方法3：如果允许前导零，改用字符串验证 #

如果你的User Token需要保留前导零（比如00123），数字类型会自动忽略前导零，这种情况应该用字符串类型配合正则验证：

<Form.Item
  name='userToken'
  label='User Token'
  rules={[
    validateForm,
    {
      pattern: /^\d{5}$/,
      message: 'User Token must be 5 numbers long!'
    }
  ]}
>
  <Input />
</Form.Item>

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