HTML5 使用特定规则进行验证

Question

如何使用以下规则在 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>

Answer 1

我希望下面的模式能行得通

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

DEMO HERE

Answer 2

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

input:invalid { outline: 1px solid red }

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

HTML5 使用特定规则进行验证

HTML5 Validation with Certain Rules

html

html5-validation