HTML 5 - 数字正则表达式答案

【问题标题】：HTML 5 - number regular expressionHTML 5 - 数字正则表达式
【发布时间】：2013-06-02 14:11:17
【问题描述】：

我有一个名为 Fleet no. 的输入字段。

我想使用 HTML 5 验证它，只允许输入 5 位最大长度的数字。

我已经设法只输入数字，但它只接受 1 个数字。

我不能输入超过 1 个数字。这就是我试图做的：

<div>
  <label for="element_1">Fleet Number </label>
  <input id="element_1" name="element_1" type="text" maxlength="255" 
  value="" required placeholder="Enter Digits only" pattern = "[0-9]"
  title='Fleet No. must contain digits only'/> 
</div>

【问题讨论】：

标签： html

【解决方案1】：

使用[0-9]{1,5}

&lt;input type="text" pattern="[0-9]{1,5}" /&gt;

{1,5} 表示重复上一部分 1, 2, 3, ..., 5 次。

【讨论】：

【解决方案2】：

这是最干净的方式

&lt;input type="text" pattern="\d{1,5}" title="Only digits" /&gt;

【讨论】：

* 表示零次或多次，不符合问题中所说的 2 条必需规则：至少 1 次且小于 6 次

【解决方案3】：

只需将以下 oninput 表达式添加到您的 HTML 标记中。这将允许接受 0 到 9 之间的唯一数字。

这也限制接受 +, -, .(dot)。

<input type="text" id="salary" name="salary" maxlength="3" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1');" />

'或'

<input type="text" id="salary" name="salary" maxlength="3" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

我在其中一个 js fiddles 中找到了这个，它对我有用。

【讨论】：

我在下面跑了run code snippet，但他们没有工作。这个答案是唯一正确的。

【解决方案4】：

为什么不为例如：使用min 和max 参数作为number 输入：

<input type="number" name="element_1" min="0" max="99999">

这仅在数字小于99999 时有效，这意味着它小于或等于 5 位。

【讨论】：

【解决方案5】：

只有 5 位数字：

见： https://regex101.com/r/pTSwFN/1/

 pattern="[0-9]{5}"

【讨论】：