输入元素的HTML模式验证

Question

有点烦人，因为我似乎无法正确解决这个问题。

我需要获得一个模式，该模式恰好接受包含大写字母和数字的12个字符。不超过12个字符。

<input type="text" placeholder="Licence Number.." pattern="[A-Z0-9]+" maxlength="12" minlength="12"  title="Enter Licence number">

我这样做的方式是错误的，因为每次输入12个字符都会激活验证消息。

Answer 1

您可以删除minlength属性，而使用模式[A-Z0-9]{12}：

input:invalid {
  color:red;
}

<input type="text" placeholder="Licence Number..." pattern="[A-Z0-9]{12}" maxlength="12" title="Enter Licence number">

使用上述模式不需要minlength属性。上面的模式也不需要maxlength属性，但是它将在12个字符之后停止输入。

目前，您的模式允许所有许可证编号，至少包含一个大写字母或数字。

Answer 2

我相信您在正则表达式中所缺少的只是一个准确的计数。如果任何输入字符至少与您的规范 匹配，则您的正则表达式将匹配。这意味着无论您输入了多长时间或有多少个“非法”字符，如果仅输入一个大写字母或数字，则正则表达式将匹配。

以下内容将检查任何大写字母或数字中的12个。

[A-Z0-9]{12}