gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 12:23:50 25 4
gpt4 key购买 nike

我有一个 Ant 金服 InputNumberForm.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 个字符的数字/值时。但是现在,输入第一个字符后,将显示此消息!
  • 最佳答案

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

    关于reactjs - 在 react 中验证 Ant 设计 InputNumber 的最大长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63578808/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com