具有特定规则的 HTML5 验证答案

【问题标题】：HTML5 Validation with Certain Rules具有特定规则的 HTML5 验证
【发布时间】：2015-06-09 13:16:17
【问题描述】：

如何使用以下规则在 HTML5 中编写验证？

用户 ID 总长度应为 7 个字符，包括字母和数字
用户 ID必须以字母开头 [A-Z / a-z] 并且应该是 2 个字符
剩余 5 个字符应为数字 [0-9]

示例：

ab12345、xy56879、pm30075

HTML

<form action="" method="post">
  <div>
    <label for="userid">User ID:</label>
    <input type="text" name="userid" class="form-control" value="" required  pattern="[A-Za-z]{2}+[0-9]{5}" title="User ID" aria-required="true" placeholder="Eg: ab12345">
  </div>
  <br>
  <div>    
  <label for="email">Email Address:</label>
  <input type="text" name="email" value="" required  title="Email" aria-required="true" placeholder="hello.world@happyworld.com">
  </div>
  <button type="submit">Submit</button>
</form>

【问题讨论】：

标签： html html5-validation

【解决方案1】：

我希望下面的模式可以做到

pattern="(?=.*[A-Za-z]{2})(?=.*[0-9]{5}).{7,7}"

DEMO HERE

【讨论】：

完美@Guruprasad Rao :)
随时 @Reddy 快乐编码.. :)

【解决方案2】：

只需从您的模式中删除 +：

input:invalid { outline: 1px solid red }

&lt;input type="text" pattern="[A-Za-z]{2}[0-9]{5}" required="true" placeholder="Eg: ab12345"&gt;

【讨论】：

感谢您的回答 @Leo :)