如何在 html 文本框中只允许 4 位数字？答案

【问题标题】：How to allow only 4 digit numbers in html textbox?如何在 html 文本框中只允许 4 位数字？
【发布时间】：2016-01-01 12:14:48
【问题描述】：

我试图限制 HTML 文本框中的用户只能插入 4 位数字 0-9。

我已经尝试如下，但它仅限于允许两位数字。

<input type="text"  name="pincode" maxlength="4"  id="pin" pattern="^0[1-9]|[1-9]\d$" required/>

【问题讨论】：

试试pattern="\d{4}"。不需要使用锚点，因为模式属性默认是锚定的。
也许type="number" maxlength="4" :-?
@ÁlvaroGonzález 它不会阻止用户输入非数字字符。此外，maxlength 将只限制输入超过 4 个字符。因此，输入 0,1,2,3 个字符是有效的。在这里 OP 希望限制用户输入 正好 4 位数字。
@Tushar 没错，您只会收到验证错误。但是 AFAIK 这就是您使用纯 HTML 所能获得的全部内容。

标签： html regex

【解决方案1】：

让我澄清一下：^[0-9]{4}$ 或 ^\d{4}$ 中的任何一个都是有效的正则表达式，用于将值限制为 4 位数字。但是，pattern HTML5 attribute 值已经默认锚定：

用于该属性的正则表达式语言与 JavaScript 中使用的相同，只是 pattern 属性匹配整个值，而不仅仅是任何子集（有点好像它在模式的开头暗示^(?:，在结尾暗示)$）。

所以，只使用pattern="\d{4}":

input:valid {
  color: green;
}
input:invalid {
  color: red;
}

<form name="form1"> 
 <input type="text"  name="pincode" maxlength="4"  id="pin" pattern="\d{4}" required/>
 <input type="Submit"/> 
</form>

顺便说一句，您的 ^0[1-9]|[1-9]\d$ 模式仅匹配 2 位输入，因为它匹配 0 后跟从 1 到 9 的任何数字，或从 1 到 9 后跟任何数字的任何数字.

另外，请注意pattern="\d{4}" 属性不会阻止在字段中输入非数字符号。请参阅How to prevent invalid characters from being typed into input fields 发布如何解决该问题。

【讨论】：

它不适用于输入：type="number"。怎么设置？？
@MukhlisRaza 还有其他专门用于此的 SO 线程，例如，请参阅 Does regex validation work when input type=“number”?。

【解决方案2】：

请尝试添加以下内容：

<input type="text" 
       maxlength="7" 
       onkeypress='return event.charCode >= 48 && event.charCode <= 57'    
       required 
/>

【讨论】：

【解决方案3】：

像下面这样改变你的模式，

pattern = "^[0-9]{4}$"

重复量词 {4} 应准确重复前一个标记 4 次。

【讨论】：

【解决方案4】：

像这样改变你的正则表达式：

pattern="\d{4}"
# allows numbers from 0000-9999

pattern="[1-9][0-9]{3}"
# from 1000-9999

{1,4} 之类的模式将允许 1 到 4 位的数字，{x} 之类的模式将位数固定为 x 次。

编辑：正如@Tushar 指出的那样，以前的正则表达式[1-9]{4} 是错误的，因为它不允许任何零。

【讨论】：

正如 Stribizhev 在他的回答中解释的那样，使用 pattern 属性时，您不需要锚点。此外，第二个正则表达式 ^[1-9]{4}$ 与数字 1111-9999 不匹配。它匹配从 1111 到 9999 的数字不包含任何零
又错了。 1[0-9]{3} 将匹配 1000-1999。你正在寻找[1-9][0-9]{3}。
如果你想阅读，请从regular-expressions.info开始。要在线测试正则表达式，请使用regex101。

【解决方案5】：

pattern="\d{4}"

允许 0000-9999 之间的数字

pattern="[1-9][0-9]{3}"

允许从 1000 到 9999 的数字

{1,4} 之类的模式将允许 1 到 4 位的数字。像{x} 这样的模式将位数固定为x 次。

【讨论】：