如何在HTML文本框中只允许输入4位数字？

Question

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

但是我尝试的方法只允许输入两位数。

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

- Nur Selam

---

尝试使用pattern="\d{4}"。无需使用锚点，因为模式属性默认已经被锚定。 - Wiktor Stribiżew

也许是 type="number" maxlength="4" :-? - Álvaro González

@ÁlvaroGonzález 它不能防止用户输入非数字字符。此外， maxlength 只会限制输入不超过4个字符。因此，输入0、1、2、3个字符是有效的。在这里，OP想要限制用户只能输入恰好4个数字。 - Tushar

@Tushar，没错，你只能得到一个验证错误。但据我所知，这就是纯HTML所能提供的全部。 - Álvaro González

Answer 1

让我解释一下：任何一个^[0-9]{4}$或^\d{4}$都是用于限制值仅为4位数字的有效正则表达式。然而，patternHTML5属性的值默认已经被锚定：

用于此属性的正则表达式语言与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}" 属性不能防止在该字段中输入非数字符号。请参见如何防止将无效字符键入输入字段帖子，了解如何解决这个问题。

- Wiktor Stribiżew

---

针对input type="number"无法工作的问题，该如何设置？ - Mukhlis Raza

@MukhlisRaza 还有其他专门讨论这个问题的SO线程，例如Does regex validation work when input type=“number”?。 - Wiktor Stribiżew

Answer 2

请尝试添加以下内容：

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

- Khaleel Hmoz

---

这是最好的答案。 - Alexis

同意。为什么要重新发明正则表达式的轮子呢？ - Isaac Riley

为数字键盘添加 || charCode <= 89 && charCode >= 80。 - talsibony

Answer 3

将您的正则表达式更改为：

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}是错误的，因为它不允许有任何0。

- Jan

---

正如Stribizhev在他的回答中解释的那样，当使用“pattern”属性时，您不需要锚点。此外，第二个正则表达式“^[1-9]{4}$”不匹配数字“1111-9999”。它匹配从1111到9999的数字不包含任何零。 - Tushar

这还是错的。1[0-9]{3}将匹配1000-1999。你要找的是[1-9][0-9]{3}。 - Tushar

如果你想学习正则表达式，请从regular-expressions.info开始阅读。要在线测试正则表达式，请使用regex101。 - Tushar

Answer 4

请按照以下方式更改您的模式：

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

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

- Avinash Raj

Answer 5

pattern="\d{4}"

允许数字范围为0000-9999

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

允许1000-9999之间的数字

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

- user9522383