Как проверить адрес электронной почты в JavaScript: четыре надежных метода

Около 30% В течение года часть адресов электронной почты в списке становится недействительными, и если более 10% вашего списка недействительны, доставляется менее 44% писем. Многие из этих недействительных адресов попадают в базы данных через формы со слабой проверкой.

Проверка адресов электронной почты в JavaScript работает в несколько этапов. Проверить правильность форматирования адреса относительно просто. Подтвердить, что домен может получать почту, — более сложная, но всё ещё выполнимая задача. Сложнее всего проверить, существует ли сам почтовый ящик и может ли он принимать сообщения, а JavaScript, работающий только в браузере, сам по себе этого сделать не может.

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

Методы проверки электронной почты в JavaScript

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

1. Атрибут HTML5 type=”email”

Простейший способ проверки адреса электронной почты с помощью JavaScript — это использование атрибута `type=”email”` в HTML5 для элемента `input`. Браузеры автоматически выполняют базовую проверку формата при отправке формы.

<form>
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required />
  <button type="submit">Submit</button>
</form>

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

Однако проверка HTML5 очень проста. Она принимает адреса типа a@b или user@domain, хотя такие адреса никогда не будут получать реальные электронные письма. Кроме того, она не предоставляет обратной связи в реальном времени во время набора текста. Поэтому используйте её только в качестве отправной точки: всегда включайте её в проверку, но никогда не полагайтесь на неё как на единственный способ проверки.

2. Проверка с помощью регулярного выражения.

Регулярные выражения (Regex) — это наиболее распространенный метод проверки адресов электронной почты в JavaScript. Он обеспечивает проверку формата, которая выполняется по запросу, до отправки формы, и выдает мгновенный результат.

Вот базовое регулярное выражение, охватывающее наиболее распространенные допустимые форматы:

function isValidEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

// Usage
console.log(isValidEmail("[email protected]"));  // true
console.log(isValidEmail("notanemail"));         // false

Понимание закономерности:

• ^ — начало строки
• [^\s@]+ — один или несколько символов, не являющихся пробелами или символом @
• @ — буквальный символ @
• [^\s@]+ — один или несколько символов после @ (домен)
• — буквальная точка
• [^\s@]+$ — один или несколько символов после точки (домен верхнего уровня)

Для более строгой проверки в соответствии с RFC 5322 можно использовать более конкретный шаблон:

function isValidEmail(email) {
  const regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\.[a-zA-Z]{2,}$/;
  return regex.test(email);
}

Оборачивание регулярного выражения в многократно используемую функцию, например isValidEmail(), позволяет хранить логику проверки в одном месте и упрощает ее обновление.

Самый большой недостаток заключается в том, что регулярные выражения проверяют только формат. Они не могут определить, существует ли домен или является ли почтовый ящик реальным. Адрес, например, такой: [электронная почта защищена] Всё равно пройдёт проверку, потому что формат выглядит корректным, даже несмотря на то, что доменное имя содержит опечатку, и письмо, скорее всего, никогда не будет доставлено.

3. Использование библиотеки проверки данных на JavaScript.

Устоявшиеся библиотеки, такие как validator.js, обрабатывают множество случаев, которые не учитываются базовыми регулярными выражениями, включая международные домены, необычные, но допустимые форматы электронной почты и новые расширения доменов. Если ваше приложение уже использует систему валидации, библиотека — более удобный вариант, чем поддержка собственных регулярных выражений.

Установите validator.js:

npm install validator

Используйте это в своем коде:

import validator from 'validator';

function isValidEmail(email) {
  return validator.isEmail(email);
}

// Usage
console.log(isValidEmail("[email protected]"));   // true
console.log(isValidEmail("[email protected]"));          // false
console.log(isValidEmail("user@example"));       // false

Метод validator.isEmail() выполняет более полную проверку форматирования, чем простое регулярное выражение, и выявляет многие распространенные проблемы форматирования.

Однако ограничение остается тем же: библиотеки проверяют только структуру, а не возможность доставки. Адрес, подобный этому: [электронная почта защищена] Тем не менее, всё проходит успешно, поскольку формат технически корректен. Для рабочих процессов регистрации, где качество списка имеет значение, этот метод требует одновременного вызова API.

4. Проверка с помощью API для проверки электронной почты

Единственный способ подтвердить существование почтового ящика — это использовать API. Рассмотренные до сих пор методы проверяют только формат адреса электронной почты. API же проверяет, действительно ли адрес может получать почту.

API проверки электронной почты DeBounce Проверяет синтаксис, записи MX домена, существование почтового ящика, статус одноразового адреса, учетные записи ролей и поведение домена для обработки всех запросов — все это в одном вызове API. Вот пример использования функции fetch() в JavaScript:

async function validateEmailWithAPI(email) {
  const apiKey = 'YOUR_DEBOUNCE_API_KEY';
  const url = `https://api.debounce.io/v1/?api=${apiKey}&email=${encodeURIComponent(email)}`;

  try {
    const response = await fetch(url);
    const data = await response.json();

    return {
      result: data.debounce?.result,
      reason: data.debounce?.reason,
      free_email: data.debounce?.free_email === "true" || data.debounce?.free_email === true,
      did_you_mean: data.debounce?.did_you_mean,
      role: data.debounce?.role === "true" || data.debounce?.role === true
    };
  } catch (error) {
    console.error('Validation error:', error);
    return null;
  }
}

Разработчиков больше всего волнует следующее:

• Результат — окончательный вердикт: «Безопасно для отправки», «Рискованно» или «Недействительно».
• причина — конкретное обнаруженное нарушение: не подлежащий выполнению, одноразовый, универсальный, синтаксическая ошибка и т. д.
• did_you_mean — исправленный адрес, если API обнаруживает распространенную опечатку (например, gmial.com → gmail.com)
• free_email — указывает, принадлежит ли адрес бесплатному провайдеру, такому как Gmail или Yahoo.

Для обнаружения одноразовых электронных писем на стороне клиента DeBounce также предлагает бесплатный одноразовый API для электронной почты что вы можете вызывать его напрямую из браузера, не раскрывая свой основной API-ключ.

Если вы предпочитаете вообще не писать код, то Виджет проверки JavaScript Устанавливается с помощью одного тега <script> и обрабатывает валидацию непосредственно в ваших формах без необходимости дополнительной интеграции.

Внедрение проверки адресов электронной почты в режиме реального времени.

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

Событие oninput срабатывает при каждом нажатии клавиши, что делает его полезным для быстрых проверок, таких как валидация регулярных выражений. Событие onchange срабатывает после того, как поле теряет фокус, что делает его более подходящим для валидации API, поскольку он ожидает, пока пользователь закончит ввод, прежде чем отправить запрос.

Вот простая настройка в реальном времени с использованием функции oninput и проверки с помощью регулярного выражения:

const emailInput = document.getElementById('email');
const feedbackEl = document.getElementById('email-feedback');

emailInput.addEventListener('input', function () {
  const email = this.value;

  if (email.length === 0) {
    feedbackEl.textContent = '';
    this.classList.remove('valid', 'invalid');
    return;
  }

  if (isValidEmail(email)) {
    this.classList.add('valid');
    this.classList.remove('invalid');
    feedbackEl.textContent = '✓ Looks good';
  } else {
    this.classList.add('invalid');
    this.classList.remove('valid');
    feedbackEl.textContent = 'Please enter a valid email address';
  }
});

При использовании метода API следует использовать механизм задержки вызова, ожидая, пока пользователь не прервет набор текста на 300–500 мс, прежде чем отправлять запрос. Это позволит избежать отправки вызова API при каждом частичном нажатии клавиши.

let debounceTimer;

emailInput.addEventListener('input', function () {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    validateEmailWithAPI(this.value).then(result => {
      if (result?.did_you_mean) {
        feedbackEl.textContent = `Did you mean ${result.did_you_mean}?`;
      }
    });
  }, 400);
});

Качественная обратная связь в режиме реального времени должна быть ясной и конкретной. «Вы имели в виду…» [электронная почта защищена]?» полезен, в то время как общие сообщения типа «Неверный адрес электронной почты» раздражают пользователей и увеличивают количество отказов от заполнения форм.

Проверка адресов электронной почты в популярных JavaScript-фреймворках

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

Использование React с React Hook Form:

import { useForm } from 'react-hook-form';

export default function SignupForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <input
        {...register('email', {
          required: 'Email is required',
          pattern: {
            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
            message: 'Enter a valid email address'
          }
        })}
      />
      {errors.email && <span>{errors.email.message}</span>}
      <button type="submit">Sign up</button>
    </form>
  );
}

Vue с VeeValidate:

import { useField, useForm } from 'vee-validate';

export default {
  setup() {
    const { handleSubmit } = useForm();
    const { value: email, errorMessage } = useField('email', (val) => {
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) || 'Enter a valid email address';
    });

    const onSubmit = handleSubmit(values => console.log(values));

    return { email, errorMessage, onSubmit };
  }
};

Проверка схемы с помощью Zod:

import { z } from 'zod';

const emailSchema = z.string().email('Enter a valid email address');

function validateEmail(email) {
  const result = emailSchema.safeParse(email);
  return result.success ? null : result.error.issues[0].message;
}

Во всех трех случаях фреймворк выполняет настройку, а вы указываете правило проверки. Если позже вы замените регулярное выражение вызовом API, общая структура останется практически неизменной.

Ограничения проверки адресов электронной почты на стороне клиента

Проверка на стороне клиента может определить, выглядит ли адрес электронной почты действительным, но она не может сказать, работает ли он на самом деле. Вот некоторые проблемы, которые JavaScript сам по себе обнаружить не может.

1. Опечатки в доменах, выглядящих вполне правдоподобно: адреса типа [электронная почта защищена], [электронная почта защищена] или [электронная почта защищена] Проверка формата проходит успешно, даже если домены написаны с ошибками. Электронное письмо так и не доходит до пользователя, адрес остается в вашем списке рассылки, что приводит к ошибкам доставки.
2. Одноразовые и временные адреса электронной почты: такие сервисы, как 10minutemail.com и guerrillamail.com, создают временные почтовые ящики, которые проходят проверку подлинности. Пользователи часто вводят их, чтобы обойти формы регистрации, после чего адрес вскоре исчезает.
3. Домены типа «перехватчик всех писем»: Некоторые домены настроены на прием всех отправленных им писем, независимо от того, существует ли конкретный почтовый ящик. Адрес в домене типа «перехватчик всех писем» пройдет проверку формата, проверку MX-записей и даже некоторые проверки SMTP, но на практике все равно будет недоставлен.
4. Адреса, основанные на ролях: Адреса типа info@, sales@, admin@ и support@ обычно управляются командами, а не отдельными лицами. Они приводят к большему количеству жалоб и, как правило, плохо подходят для маркетинговых списков. Регулярные выражения не могут надежно их идентифицировать.
5. Спам-ловушки: это адреса электронной почты, используемые организациями по обеспечению доставляемости для выявления отправителей с плохой чистотой списка рассылки. Они выглядят совершенно нормально и проходят проверку на стороне клиента, но отправка на них может навредить вашей репутации отправителя.

API проверки электронной почты DeBounce выявляет все пять проблем благодаря проверкам на уровне почтового ящика в режиме реального времени и постоянно обновляемым данным проверки. Для поддержания качества списка рассылки в долгосрочной перспективе, инструменты проверки электронной почты Также можно повторно проверить старые контакты сразу в пакетном режиме, что помогает удалить адреса, которые со временем становятся недействительными.

Рекомендации по проверке адресов электронной почты в JavaScript

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

• Поэтапная проверка: начните с атрибута email в HTML5, добавьте регулярное выражение или библиотеку проверки, а затем используйте вызов API для проверки на уровне почтового ящика. Каждый последующий уровень выявляет проблемы, которые пропустил предыдущий, а более ранние проверки обеспечивают мгновенную обратную связь без ожидания сетевого запроса.
• Никогда не полагайтесь только на проверку на стороне клиента для критически важных с точки зрения безопасности процессов: проверку в браузере можно обойти, поэтому адреса электронной почты всегда следует повторно проверять на сервере перед обработкой регистраций, покупок или создания учетных записей.
• Используйте проверенную временем библиотеку или API вместо того, чтобы долгое время поддерживать собственные регулярные выражения: форматы адресов электронной почты развиваются. Библиотека или API, которые активно поддерживаются, обрабатывают новые крайние случаи, не требуя от вас обновления собственных шаблонов.
• Отключайте вызовы API и предоставляйте наглядную визуальную обратную связь: индикатор загрузки во время выполнения API, зеленую галочку при успешном выполнении и конкретное сообщение об ошибке при сбое («Вы имели в виду…?» [электронная почта защищена]?") Обеспечьте адаптивность формы и снизьте отток пользователей.
• Результаты проверки логов в процессе разработки: при просмотре логов становятся очевидными одноразовые почтовые сервисы, повторяющиеся опечатки и подозрительные домены, что упрощает ужесточение правил проверки с течением времени.
• Проверяйте данные и на уровне списка: проверка в реальном времени выявляет некорректные адреса во время регистрации, а также Проверка списка адресов электронной почты помогает удалять адреса, которые впоследствии становятся неактивными.

Выводы

Валидация HTML5 предоставляет базовые проверки форматирования бесплатно. Библиотеки регулярных выражений и валидации улучшают пользовательский опыт благодаря быстрой обратной связи на стороне клиента, а API проверяют, действительно ли почтовый ящик существует и может ли он получать электронные письма.

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

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