Атрибут pattern тега <input>

Описание

Атрибут pattern задаёт регулярное выражение, которому должно соответствовать значение элемента <input>. Используется для валидации вводимых данных непосредственно в браузере.

Пример использования:
<!-- Проверка почтового индекса --> <label for="zip">Почтовый индекс (6 цифр):</label> <input type="text" id="zip" name="zip" pattern="\d{6}" title="Введите 6 цифр почтового индекса" required>

Поддерживаемые типы input:

Тип Пример pattern Описание
text [A-Za-z]{3,} Только буквы, минимум 3
tel [\+]\d{1,3}[\d\s-]{6,} Международный номер телефона
password (?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,} Сложный пароль
email [a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$ Проверка email
url https?://.+ Веб-адрес с http/https

Пример с проверкой пароля:

<label for="pass">Пароль:</label> <input type="password" id="pass" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Минимум 8 символов, 1 цифра, 1 заглавная и 1 строчная буква" required>

Рекомендации:

  • Всегда добавляйте атрибут title с пояснением формата
  • Сочетайте с required для обязательных полей
  • Тестируйте регулярные выражения на разных браузерах
  • Дублируйте проверку на сервере

Пример с проверкой даты:

<label for="birthdate">Дата рождения (ДД.ММ.ГГГГ):</label> <input type="text" id="birthdate" name="birthdate" pattern="(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[012])\.(19|20)\d{2}" title="Введите дату в формате ДД.ММ.ГГГГ">

Ограничения:

  • Не работает с типами number, range, date и другими не-текстовыми
  • Регулярные выражения должны соответствовать стандарту JavaScript
  • В старых браузерах может игнорироваться
  • Нет поддержки модификаторов (например, case-insensitive)

Пример с динамической подсказкой:

<label for="promo">Промокод:</label> <input type="text" id="promo" name="promo" pattern="[A-Z]{2}\d{4}" title="2 заглавные буквы и 4 цифры"> <div id="promo-hint" style="font-size:0.8em;color:#666;">Формат: AB1234</div>

Примечание: Атрибут pattern предоставляет удобный способ проверки данных на стороне клиента, но не заменяет серверную валидацию. Для сложных проверок используйте JavaScript.