Question

我在React项目的InputNumber中有一只蚂蚁Form.Item。我对此输入的验证是检查输入值的长度。

这是我的代码：

render() {
    return (
      <Form.Item
        label="Value"
        name="numberValue"
        rules={[
          {
            pattern: /^(?:\d*)$/,
            message: "Value should contain just number",
          },
          {
            maxLength: 50,
            message: "Value should be less than 50 character",
          },
        ]}
        validateTrigger="onBlur"
      >
        <InputNumber
          onChange={(value) => {
            this.props.setValue(value);
          }}
        />
      </Form.Item>
    );
  }

我有两个问题：

我想在用户输入非数字字符时显示Value should contain just number消息。但是此消息根本不显示。
当用户输入超过10个字符的数字/值时，我想显示Value should be less than 50 character消息。但是现在，输入第一个字符后，将显示此消息！

Answer 1

<InputNumber 
    type="number" 
    placeholder="00" 
    parser={(value) => { 
        return value.substring(0, 2)
    }} 
/>

它只允许写入 2 位数。如果您想允许的不仅仅是更改子字符串值 2

Answer 2

取决于您使用的验证库。

InputNumber的最大值为Number.MAX_SAFE_INTEGER，因此可以使用带有模式匹配器的简单<Input>：

  render() {
    return (
      <Form.Item
        label="Value"
        name="numberValue"
        rules={[
          {
            pattern: /^(?:\d*)$/,
            message: "Value should contain just number",
          },
          {
            pattern: /^[\d]{0,50}$/,
            message: "Value should be less than 50 character",
          },
        ]}
        validateTrigger="onBlur"
      >
        <Input
          onChange={(value) => {
            this.props.setValue(value);
          }}
        />
      </Form.Item>
    );
  }

验证react中蚂蚁设计InputNumber的最大长度

2 个答案: