Проверка HTML5 с определенными правилами

Question

Как я могу написать валидацию в HTML5 с приведенными ниже правилами?

• ID пользователя общая длина должна быть 7 символов включая буквы и цифры
• ID пользователя должен начинаться с алфавитами [AZ/аза], и она должна быть символов
• Остальные 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">