Form表单验证中的坑

使用rule的type='number'验证输入的是否为数字，当输入完后将输入项置空发现会出现两条提示信息

<Form onSubmit={(e) => this.handleSubmit(e)}>
    <Form.Item {...formItemLayout} label="uid">
         {getFieldDecorator("uid",{
              rules: [{
                 required: true, 
                 message: "请输入uid！"
              },{
                type: 'number', 
                message: "请输入数字！"
             }],
          })(
               <Input placeholder="搜索uid" />
          )}
    </Form.Item>
    <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
          <Button type="primary" htmlType="submit">
             Submit
          </Button>
    </Form.Item>
</Form>

表单验证.png

改用pattern后则正常：

<Form onSubmit={(e) => this.handleSubmit(e)}>
    <Form.Item {...formItemLayout} label="uid">
         {getFieldDecorator("uid",{
              rules: [{
                 required: true, 
                 message: "请输入uid！"
              },{
                pattern: /^[0-9]+$/, 
                message: "请输入数字！"
             }],
          })(
               <Input placeholder="搜索uid" />
          )}
    </Form.Item>
    <Form.Item wrapperCol={{ span: 12, offset: 5 }}>
          <Button type="primary" htmlType="submit">
             Submit
          </Button>
    </Form.Item>
</Form>