Как проверить email-адрес в JavaScript: пример формы

Чтобы проверить email-адрес в JavaScript, используйте HTML-поле <input type="email"> с атрибутом required. Вызов checkValidity() поможет выбрать сообщение для пользователя. Корректный формат еще не подтверждает, что домен или ящик существует, а человек имеет доступ к почте. Это ограничение описано в справке MDN о поле для email-адреса.

Пример формы для браузера

Сохраните код в HTML-файл и откройте его в браузере. Введите один адрес и нажмите Continue или Enter. Пример покажет результат проверки формата прямо на странице. Перед использованием при регистрации подключите обработку успешной проверки к своему серверу. Подписи и сообщения в коде оставлены на английском как часть примера; для своего интерфейса их можно перевести.

<form id="email-form" novalidate>
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email"
         required aria-describedby="email-feedback">
  <p id="email-feedback" aria-live="polite"></p>
  <button type="submit">Continue</button>
</form>

<script>
const form = document.querySelector("#email-form");
const email = document.querySelector("#email");
const feedback = document.querySelector("#email-feedback");

email.addEventListener("input", () => {
  feedback.textContent = "";
  email.removeAttribute("aria-invalid");
});

form.addEventListener("submit", (event) => {
  event.preventDefault();

  if (!email.checkValidity()) {
    const message = email.validity.valueMissing
      ? "Enter an email address."
      : email.validity.typeMismatch
        ? "Enter an address in email format."
        : "Check the email address.";

    feedback.textContent = message;
    email.setAttribute("aria-invalid", "true");
    email.focus();
    return;
  }

  email.removeAttribute("aria-invalid");
  feedback.textContent = "Format accepted. Send the address to your server.";
});
</script>

Как пример обрабатывает ошибки

novalidate отключает автоматическую проверку при отправке формы, но явный вызов checkValidity() продолжает работать. Свойство valueMissing указывает на пустое обязательное поле, а typeMismatch сообщает об ошибке формата. Эти проверки описаны в стандарте HTML, в разделе Constraint Validation API.

Элемент label задает подпись поля. При ошибке код показывает конкретное сообщение, устанавливает aria-invalid и возвращает фокус в поле. Атрибут aria-describedby связывает сообщение с полем, а aria-live="polite" делает изменения доступными для вспомогательных технологий. Когда человек редактирует значение, код убирает старую ошибку и отметку о некорректном вводе. Сообщение об ошибке не зависит от цвета.

Если стандартные сообщения браузера подходят вашей форме, настройте отправку POST-запроса своему серверному обработчику. Затем удалите novalidate и JavaScript-обработчик отправки. HTML-поле уже умеет проверять формат; JavaScript в этом примере управляет текстом и расположением сообщения.

Что проверить перед подключением сервера

Введите в форму значения из таблицы. Результаты относятся к проверке этого примера в браузере: сетевые запросы не выполняются.

После ошибки исправьте значение и отправьте форму повторно. Старое сообщение и aria-invalid должны исчезнуть. Проверьте и кнопку, и клавишу Enter: отправку формы можно вызвать обоими способами.

Домены в примерах вымышленные: RFC 2606 резервирует example.com и example.org для документации. Принятый адрес из примера не подтверждает существование реального ящика.

Когда нужно свое регулярное выражение

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

Передавайте принятые адреса на сервер без изменений. Если убрать +orders из тестового адреса, введенное значение изменится. Этот пример проверяет один адрес по правилам поля браузера. Для необычных или международных форматов отдельно определите, что поддерживает приложение, и проверьте всю цепочку: форму, серверный парсер и почтовый сервис.

Что делать на сервере после проверки формата

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

В примере event.preventDefault() отменяет отправку формы. Запрос к приложению нужно добавить там, где сейчас появляется сообщение об успехе. Прежде чем продолжать регистрацию, проверьте ответ сервера. Если запрос не удался, покажите понятную ошибку и дайте возможность повторить попытку. Локальное сообщение об успехе само по себе не должно создавать аккаунт или помечать адрес как проверенный.

После серверной проверки формата выберите следующий шаг по задаче:

Сравнение проверки синтаксиса и SMTP поможет выбрать глубину проверки. Полная проверка Emvero может получить SMTP-свидетельства о получателе без отправки письма. Ограничения почтового сервера или тайм-аут могут привести к результату unknown. Такой результат не доказывает, что адрес не может принимать письма. Вызывайте API проверки email-адресов со своего сервера, чтобы учетные данные оставались закрытыми.

Руководство по проверке формы регистрации поможет решить, при каких результатах продолжать регистрацию, а когда запрашивать подтверждение.