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

Question

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

我尝试了如下,但它仅限于允许两位数字.

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

Answer 1

让我澄清一下:将值限制为4位数的任何^[0-9]{4}$或^\d{4}$有效的正则表达式.但是,patternHTML5属性值默认已锚定:

用于该属性的正则表达式语言是相同的,在JavaScript中使用,不同的是图案属性与整个值匹配,而不仅仅是任何子集(有点仿佛它隐含了^(?:在图案的开始和一个)$在结束).

所以,只使用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}"属性不会阻止在字段中输入非数字符号.有关如何解决此问题,请参阅如何防止将无效字符输入到输入字段中.

Answer 2

请尝试添加以下内容：

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

Answer 3

改变你的模式，如下所示，

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

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

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