---
title: "Проверка email в JavaScript: пример формы | Emvero"
description: "Проверьте формат email-адреса с помощью HTML и JavaScript, покажите понятную ошибку и повторите проверку на сервере. Рабочий пример формы."
url: https://emvero.io/ru/blog/email-validation-javascript/
language: ru
updated: 2026-10-14
---

Блог

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

Создайте поле для email-адреса с понятными ошибками, проверьте ограничения примера и передайте принятые данные на сервер для независимой проверки.

Опубликовано 2026-10-14

Чтобы проверить email-адрес в JavaScript, используйте HTML-поле ` ` с атрибутом `required`. Вызов `checkValidity()` поможет выбрать сообщение для пользователя. Корректный формат еще не подтверждает, что домен или ящик существует, а человек имеет доступ к почте. Это ограничение описано в [справке MDN о поле для email-адреса](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/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](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api).

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

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

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

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

| Ввод | Результат в примере | На что обратить внимание |
| --- | --- | --- |
| Пустое поле | Сообщение об обязательном значении | Фокус возвращается в поле, установлен `aria-invalid` |
| `alex.example.com` | Ошибка формата | Браузер замечает отсутствие `@` |
| `alex@example.com` | Формат принят | Адрес никуда не отправляется |
| `alex+orders@example.com` | Формат принят | Локальная часть с меткой после `+` сохраняется |
| `alex@example` | Формат принят | Успешная проверка в браузере не подтверждает наличие публичного почтового маршрута |
| `alex@example.com,pat@example.org` | Ошибка формата | Форма принимает один адрес, атрибут `multiple` не задан |

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

Домены в примерах вымышленные: [RFC 2606 резервирует `example.com` и `example.org` для документации](https://www.rfc-editor.org/rfc/rfc2606.html). Принятый адрес из примера не подтверждает существование реального ящика.

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

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

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

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

Передайте значение на сервер приложения через обычный обработчик формы или API. Повторите проверку на сервере: клиент может обойти ограничения браузера и отправить запрос напрямую. Почему серверная проверка необходима, объясняет [руководство MDN по проверке форм](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation).

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

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

| Вопрос | Подходящий следующий шаг | Что остается неподтвержденным |
| --- | --- | --- |
| Похож ли текст на email-адрес? | Подсказки в браузере и независимая проверка на сервере | Существование домена или ящика |
| Можно ли использовать адрес в этом процессе? | Серверная проверка домена, почтового маршрута и, если доступны, свидетельств о получателе | Гарантированная доставка или доступ человека к ящику |
| Есть ли у человека доступ к ящику? | Отправить из приложения ссылку или код подтверждения и дождаться ответа | Личность человека или будущая доставка |

Сравнение [проверки синтаксиса и SMTP](https://emvero.io/ru/compare/smtp-vs-syntax-validation/) поможет выбрать глубину проверки. Полная проверка Emvero может получить SMTP-свидетельства о получателе без отправки письма. Ограничения почтового сервера или тайм-аут могут привести к результату `unknown`. Такой результат не доказывает, что адрес не может принимать письма. Вызывайте [API проверки email-адресов](https://emvero.io/ru/email-verification-api/) со своего сервера, чтобы учетные данные оставались закрытыми.

[Руководство по проверке формы регистрации](https://emvero.io/ru/guides/signup-form-validation/) поможет решить, при каких результатах продолжать регистрацию, а когда запрашивать подтверждение.

## Термины, которые здесь встречаются

### Синтаксис адреса

Правила записи email-адреса. Проверка формата не устанавливает существование домена или ящика.

### SMTP-рукопожатие

Обмен командами и ответами с почтовым сервером. При проверке адреса позволяет запросить прием конкретного получателя.

## Ситуации, к которым это относится

### Проверка адреса в форме регистрации

По ту сторону запроса кто-то ждёт, поэтому задержка определяет всю конструкцию, а ошибочный отказ стоит вам клиента.

[Все статьи](https://emvero.io/ru/blog/)

## Выберите, что проверить дальше.

Запустите проверку в личном кабинете и посмотрите данные в результате.

Начать бесплатно