Html 如何在html文本框中只允许4位数字？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34556035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to allow only 4 digit numbers in html textbox?
提问by Nur Selam
I have tried to restrict users in HTML text box to insert only 4 digit numbers 0-9.
我试图限制用户在 HTML 文本框中只插入 0-9 的 4 位数字。
I have tried as follows but it restrict only to allow two digit numbers.
我试过如下，但它限制只允许两位数。
<input type="text" name="pincode" maxlength="4" id="pin" pattern="^0[1-9]|[1-9]\d$" required/>
回答by Wiktor Stribi?ew
Let me clarify: any of the ^[0-9]{4}$or ^\d{4}$are valid regexps to restrict values to 4 digits only. However, patternHTML5 attributevalue is already anchored by default:
让我澄清一下：任何^[0-9]{4}$or^\d{4}$是有效的正则表达式，以将值限制为仅 4 位数字。但是，默认情况下已经锚定patternHTML5 属性值：
The regular expression language used for this attribute is the same as that used in JavaScript, except that the pattern attribute is matched against the entire value, not just any subset (somewhat as if it implied a
^(?:at the start of the pattern and a)$at the end).
用于此属性的正则表达式语言与 JavaScript 中使用的相同，除了模式属性与整个 value 匹配，而不仅仅是任何子集（好像它隐含
^(?:在模式开头的 a)$和结束）。
So, use just pattern="\d{4}":
所以，只使用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>BTW, your ^0[1-9]|[1-9]\d$pattern matches only 2 digit inputs because it matches either 0followed by any digit from 1to 9, or any digit from 1to 9followed by any digit.
顺便说一句，你^0[1-9]|[1-9]\d$是因为它匹配任何模式匹配，只有2位数字输入0，然后从任何数字1来9，或者从任意数字1至9后跟任何数字。
Also, note that pattern="\d{4}"attribute does not prevent entering non-digit symbols into the field. See How to prevent invalid characters from being typed into input fieldspost how to solve that.
另请注意，pattern="\d{4}"属性不会阻止在字段中输入非数字符号。请参阅如何防止在输入字段中输入无效字符发布如何解决该问题。
回答by Khaleel Hmoz
Please try adding the following:
请尝试添加以下内容：
<input type="text"
maxlength="7"
onkeypress='return event.charCode >= 48 && event.charCode <= 57'
required
/>
回答by Jan
Change your regex like so:
像这样改变你的正则表达式：
pattern="\d{4}"
# allows numbers from 0000-9999
pattern="[1-9][0-9]{3}"
# from 1000-9999
A pattern like {1,4}would allow numbers with 1 up to 4 digits, a pattern like {x}fixes the number of digits to x times.
像{1,4}这样的模式将允许 1 到 4 位数字，像这样的模式{x}将位数固定为 x 次。
Edit:As @Tushar pointed out, the formerly regex [1-9]{4}was wrong as it did not allow any zeros.
编辑：正如@Tushar 指出的那样，以前的正则表达式[1-9]{4}是错误的，因为它不允许任何零。
回答by Avinash Raj
Change your pattern like below,
改变你的模式，如下所示，
pattern = "^[0-9]{4}$"
Repeatation quantifier {4}should repeat the previous token exactly 4times.
重复量词{4}应该准确重复前一个标记的4次数。
回答by user9522383
pattern="\d{4}"
allows numbers from 0000-9999
允许 0000-9999 之间的数字
pattern="[1-9][0-9]{3}"
allows numbers from 1000-9999
允许 1000-9999 之间的数字
A pattern like {1,4}would allow numbers with 1 up to 4 digits. A pattern like {x}fixes the number of digits to xtimes.
像{1,4}这样的模式将允许 1 到 4 位数字。类似的模式{x}将位数固定为x次数。
回答by Sajid
I have solved the problem. The following script will take only 4 digit in the text field.
我已经解决了这个问题。以下脚本将在文本字段中仅使用 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>
Visit Sitefor more basic question regarding HTML
有关 HTML 的更多基本问题，请访问站点
