Атрибут pattern: формат значения текстового поля

Назначение

Pattern задаёт регулярное выражение для проверки значения поддерживаемого поля ввода. Он полезен для коротких кодов с заранее определённым форматом, который можно понятно объяснить пользователю.

Как это работает

Шаблон должен совпасть со всем значением, а не с отдельным фрагментом. Ограничивающие слеши не нужны. Required проверяет обязательность заполнения отдельно. Современный синтаксис pattern использует Unicode-aware режим v, поэтому сложные классы символов требуют внимательного экранирования.

Пример

<label for="lesson-code">Код урока</label>
<input id="lesson-code" name="code" pattern="[A-Z]{2}[0-9]{3}" required aria-describedby="code-help">
<p id="code-help">Две заглавные латинские буквы и три цифры, например AB123.</p>

Что должно получиться

AB123 соответствует формату, AB12 и ab123 — нет. Пустое поле нарушает required. Пример содержит видимое объяснение, поэтому пользователю не приходится расшифровывать само регулярное выражение.

Граница применения и частая ошибка

Pattern не применяется к input type="number". Не ограничивайте реальные имена людей узким алфавитом без причины. Клиентскую проверку легко обойти, поэтому сервер должен независимо проверить данные. Подсказка только в title недостаточно доступна.

Самостоятельная проверка

В отдельном файле сравните validity.patternMismatch для трёх значений. Уберите required и проверьте пустое поле. Добавьте пробел перед кодом и решите, должно ли приложение отклонять его или явно нормализовать ввод.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Связанные материалы

• Поля ввода
• Изображения
• Постепенное улучшение