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

Question

我在react项目的Form.Item中有一个ant dInputNumber。我对这个输入的验证是检查输入值的长度。

这是我的代码：

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>
);
}

我有两个问题：

1. 当用户输入非数字字符时，我想显示Value should contain just number消息。但这条信息根本没有显示出来。

2. 当用户输入超过10个字符的数字/值时，我想显示Value should be less than 50 character消息。但是现在，输入第一个字符，就会显示此消息！

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>
);
}

Answer 2

定义输入长度的最简单方法：

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

Answer 3

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

---

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

Answer 4

您在<Input />中使用最大长度，并且type='number'必须在规则中使用

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

Answer 5

本机输入标记本身不支持使用maxLength的类型为'number'的输入标记。MaxLength适用于文本。

Github Ant Design问题的链接。

蚂蚁设计与此无关。

相反，您可以使用如下代码来限制数量。

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