添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

I have an antd InputNumber in Form.Item in a react project. My validation for this input is checking the length of input value.

This is my code:

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>

I have two problems:

  • I want to show the Value should contain just number messages when user enter non numeric character. But this message doesn't show at all.

  • I want to show the Value should be less than 50 character message, when user enter the number/value with more than 10 character. But now, with entering the first character, this message will be shown!

    Depends on which validation library are you using.

    InputNumber max is Number.MAX_SAFE_INTEGER, so maybe use a simple <Input> with a pattern matcher:

      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>
                    I want to check the length of input value.  max check the value. I tested max before, it will check the value. for example when I enter 51 as a value, the related message will be shown
    – Zahra Talebi
                    Aug 25, 2020 at 12:41
                    Oh, I get it. InputNumber has a limit, it cannot reach 50 chars anyways. I've added a solution that works with simple <Input>
    – Robert Kovacs
                    Aug 25, 2020 at 13:01
                    ant.design/components/input-number/#API states that max is Number.MAX_SAFE_INTEGER, maybe you can change that.
    – Robert Kovacs
                    Aug 25, 2020 at 13:03
    

    You use maxlength in <Input /> and type='number' must in rules

    <Input maxLength={50}
        onChange={e => getValue(e.target.value)}
        rules={[{ type: 'number' }]} />
    

    The native input tag it self won't support input tag which has type='number' to use maxLength. MaxLength works with text.

    Link to the Github Ant Design issue.

    Ant Design has nothing to do with this.

    Instead you can use as bellow code to limit the number.

    <Input 
      onChange={(e) =>
        e.target.value.length <= 10 &&
        handleChange(e.target.value)
      type='number'
            

    Thanks for contributing an answer to Stack Overflow!

    • Please be sure to answer the question. Provide details and share your research!

    But avoid

    • Asking for help, clarification, or responding to other answers.
    • Making statements based on opinion; back them up with references or personal experience.

    To learn more, see our tips on writing great answers.

  •