Атрибут pattern тега <input> — перевірка регулярним виразом

<form> 
  <p><b>З використанням атрибута pattern</b></p>
  <p>Введіть логін та пароль:</p>
			<label>Логін <input type = "text" name = "login" pattern = "[A-Za-z0-9]{6,}" title = "Логін не может бути меншим за 6 латинських символів."></label><br><br>
			<label>Пароль <input type = "password" name = "pswd" pattern = "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title = "Пароль не може бути меншим за вісім символів і має містити хоча б одну цифру, одну маленьку та одну велику латинську літеру."></label><br><br> 
			<input type = "submit" value = "Увійти"> 
		</form>
<br><br>
<form> 
  <p><b>Без використання атрибута pattern</b></p>
  <p>Введіть логін та пароль:</p>
			<label>Логін <input type = "text" name = "login" ></label><br><br>
			<label>Пароль <input type = "password" name = "pswd"></label><br><br> 
			<input type = "submit" value = "Увійти"> 
		</form>

HTML

<form>
  <p>
    <label>Індекс — рівно 5 цифр<br>
      <input type="text" pattern="[0-9]{5}" title="П'ять цифр, наприклад 01001" placeholder="01001">
    </label>
  </p>
  <p>
    <label>pattern="[0-9]{3}" — збіг з усім значенням<br>
      <input type="text" pattern="[0-9]{3}" title="Рівно три цифри й нічого більше" placeholder="спробуйте 123 і 123abc">
    </label>
  </p>
  <p>
    <label>pattern="/[0-9]+/" — помилка: риски стали частиною виразу<br>
      <input type="text" pattern="/[0-9]+/" title="Тепер браузер вимагає ввести й риски" placeholder="спробуйте 12 і /12/">
    </label>
  </p>
</form>

CSS

label { display: block; margin-bottom: .2em; }
input {
  font: inherit;
  padding: .4em;
  border: 2px solid #bbb;
  border-radius: 4px;
  min-width: 18em;
}
input:user-valid { border-color: #2a7f3f; background: #f2fbf4; }
input:user-invalid { border-color: #c0392b; background: #fdf3f2; }