html - 在输入限制中组合两个正则表达式 "pattern"

Question

我需要一个输入框，用户只能在其中输入 7 个数字，不能多，不能少，不能有别的。

我需要(检查 7 个字符)

pattern=".{7,7}"

和(只检查数字)

pattern="\d*"

一起工作，但你不能定义模式两次，我如何将这两者结合在一起？

Answer 1

你可以使用

pattern="\d{7}"

或使用显式 anchor :

pattern="^\d{7}$"

查看 regex demo .

您不需要为最小和最大阈值指定相同的值。如果您想允许 1 到 7 位数字，那么它是有意义的:pattern="\d{1,7}"。

input:valid {
  color: black;
}
input:invalid {
  color: navy;
}

<form name="form1"> 
 <input type="text" pattern="\d{7}" title="7 digits only!" required/>
 <input type="Submit"/> 
</form>

要使输入字段成为必填项，请添加 required 属性。