Question

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

我尝试过如下操作，但它仅限于允许两位数字。

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

Answer 1

让我澄清一下：^[0-9]{4}$或^\d{4}$中的任何一个都是有效的regexp，只能将值限制为4位数。但是，pattern HTML5 attribute值默认已锚定：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

顺便说一下，您的^0[1-9]|[1-9]\d$模式只匹配2位数输入，因为它匹配0后跟1到9的任意数字，或{{1}的任何数字{}}到1后跟任意数字。

另请注意，9属性不会阻止在字段中输入非数字符号。请参阅How to prevent invalid characters from being typed into input fields发布如何解决此问题。

Answer 2

请尝试添加以下内容：

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

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

Answer 4

如下所示更改您的模式，

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

重复量词{4}应该完全重复4次前一个令牌。

Answer 5

pattern="\d{4}"

允许来自0000-9999的数字

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

允许数字从1000-9999

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

Answer 6

我已经解决了这个问题。以下脚本在文本字段中仅占4位数。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Digit in html form</title>
</head>
<body>
<input name="myInput_DRS"
onkeypress="return isNumeric(event)"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "4"
min = "1"
max = "9999" />
<script>
function maxLengthCheck(object) {
if (object.value.length > object.maxLength)
  object.value = object.value.slice(0, object.maxLength)
}

function isNumeric (evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode (key);
var regex = /[0-9]|\./;
if ( !regex.test(key) ) {
  theEvent.returnValue = false;
  if(theEvent.preventDefault) theEvent.preventDefault();
}
}
</script>
</body>
</html>

访问Site以获取有关HTML

的更多基本问题

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

6 个答案: