html - 具有特定规则的 HTML5 验证

Question

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

• 用户 ID 总长度应为7 个字符，包括字母和数字
• 用户 ID必须以字母[ AZ / az ] 开头，并且应该是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}"

在这里演示

Answer 2

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

input:invalid { outline: 1px solid red }

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