reactjs - 在 react 中验证 Ant 设计 InputNumber 的最大长度

Question

我有一个 Ant 金服 InputNumber在 Form.Item在 react 项目中。
我对此输入的验证是检查输入值的长度。
这是我的代码:

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用户输入非数字字符时的消息。但这条消息根本不显示。

我要展示Value should be less than 50 character消息，当用户输入超过 10 个字符的数字/值时。但是现在，输入第一个字符后，将显示此消息!

Answer 1

取决于您使用的是哪个验证库。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>
    );
  }