HTML5: валидация электронной почты через атрибут pattern

Быстрый ответ

Для базовой валидации адреса электронной почты в HTML5 используйте регулярное выражение ^\S+@\S+\.\S+$ в сочетании с типом input email. Вот пример такого применения:

<input type="email" pattern="^\S+@\S+\.\S+$" title="Следуйте указанному формату.">

Требует наличия символов без пробелов до и после символа @, а также минимум одной точки в доменной части, что позволяет исключить некорректные email-адреса.

Обеспечение информативной обратной связи пользователям

Чтобы повысить качество пользовательского опыта и снизить количество ошибок, важно обеспечить прозрачное информирование. Если введенные данные не соответствуют указанному шаблону, пользователи должны получить ясное сообщение об ошибке. В этом помогает атрибут title, описывающий ожидаемый формат. Для обратной связи в реальном времени можно использовать JavaScript.

<input type="email" pattern="^\S+@\S+\.\S+$"
       title="Указанный формат: user@example.com" 
       oninvalid="this.setCustomValidity('Пожалуйста, введите корректный адрес электронной почты.')"
       onchange="this.setCustomValidity('')">

Учет различных форматов email

Приведенное выше регулярное выражение может служить отличной отправной точкой, но стоит учесть, что форматы email могут существенно различаться:

• Специальные символы в локальной части адреса: необходимо учесть возможное использование этих символов (^[a-zA-Z0-9._%+-]+)
• Домены с дефисами: следует учесть присутствие дефисов в доменной части регулярного выражения ([a-zA-Z0-9.-]+)
• TLD разной длины: важно разрешить домены верхнего уровня различной длины (.+\.[a-zA-Z]{2,}$)

Не следует полагаться исключительно на встроенную валидацию HTML5, так как она не всегда охватывает все аспекты форматов электронных адресов, например:

• Старые форматы: редко используются, но все еще валидны (например, "user@[IPv6:2001:db8::1]")
• Иноязычные символы: адреса с использованием не латинских символов (требуют конвертирования в Punycode)

Визуализация

Процесс валидации email-адресов можно сравнить с процессом ловли бабочек сетью:

Cеть для ловли бабочек: пропускает только тех, кто есть в списке (Валидные email-адреса)

Список гостей: [🦋🎟️💌]

🦋 = username@domain.tld
🎟️ = user.name@domain.tld
💌 = user_name@sub.domain.tld

Только адреса из "списка гостей" пройдут нашу проверку:

если 🦋🎟️💌 соответствуют действующему регулярному выражению: 
  Добро пожаловать! Попробуйте нектар! 🥂🌸
иначе:
  К сожалению, вам вход запрещен. :( 🚷

А вот работник у входа:

Билетер: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

Это регулярное выражение поможет отфильтровать только корректные email-адреса.

Погружение в надежную валидацию

Оказывается, валидация email-адресов многогранна и сложнее, чем может показаться. Можно обратиться к нескольким дополнительным стратегиям для обеспечения высокого качества:

Валидация на стороне сервера

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

Подробнее об этом расскажет наш спикер на видео

Старая школа

С помощью Modernizr можно проверить поддержку функциональности и реализовать удобства для старых браузеров. Это обеспечит единообразный вид форм на различных платформах.

Использование атрибутов фреймворков

При использовании фронтенд-фреймворков воспользуйтесь их встроенными возможностями валидации, например, атрибутом ngModel в Angular, чтобы упростить процесс валидации и облегчить поддержку кода.

Улучшение проверки на стороне клиента

Применение Ajax и JSON позволяет проводить проверку данных в реальном времени до отправки формы, благодаря чему улучшается интерактивность и снижается вероятность ошибок.

Протестируйте, а затем протестируйте еще

Такие инструменты, как RegExr, могут служить отличным полем для тестирования регулярных выражений. Проверьте ваши выражения на различных email-адресах.

Полезные материалы

1. <input type="email"> – HTML: HyperText Markup Language | MDN — подробное руководство по использованию email в HTML5.
2. RegExr: Learn, Build, & Test RegEx — интерактивный инструмент для тестирования и создания регулярных выражений.
3. HTML Standard — официальная спецификация HTML5 для типа ввода email.
4. HTML5Pattern — коллекция готовых шаблонов для ввода email-адресов в HTML5.
5. regex – How can I validate an email address using a regular expression? – Stack Overflow — обсуждение распространенных ошибок и примеров валидации email.
6. HTML5 Form Validation — SitePoint — примеры валидации форм в HTML5, включая ввод email.
7. How to Find or Validate an Email Address — подробное разъяснение использования регулярных выражений для валидации адресов электронной почты.