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

Введение

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

Проверяйте электронные письма с помощью регулярных выражений

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

function isValidEmail(email) {
 const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 return emailRegex.test(email);
 }

Эта функция использует регулярное выражение (emailRegex) для определения шаблона действительного адреса электронной почты. Затем функция проверяет, соответствует ли предоставленный адрес электронной почты шаблону, используя метод test(). Функция возвращает true, если адрес электронной почты действителен, и false в противном случае.

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

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

Проверка электронных писем с использованием входных атрибутов HTML5

HTML5 предоставляет встроенный способ проверки адресов электронной почты с использованием атрибутов типа и шаблона элемента ввода:

<form>
 <label for="email">Email:</label>
 <input type="email" id="email" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>
 <input type="submit" value="Submit">
 </form>

Здесь для атрибута type установлено значение «email», что указывает браузеру проверять ввод как адрес электронной почты. Атрибут шаблона используется для принудительного применения пользовательского шаблона проверки электронной почты (подобного тому, что используется в примере JavaScript). Обязательный атрибут гарантирует, что поле должно быть заполнено перед отправкой формы.

Добавить настраиваемые сообщения проверки

Вы можете добавить собственные сообщения проверки, используя метод setCustomValidity():

document.getElementById("email").addEventListener("input", function() {
 const email = this.value;

 if (!isValidEmail(email)) {
 this.setCustomValidity("Please enter a valid email address.");
 } else {
 this.setCustomValidity("");
 }
 });

Этот фрагмент кода добавляет прослушиватель событий в поле ввода электронной почты. Если адрес электронной почты недействителен, отображается пользовательское сообщение проверки с использованием метода setCustomValidity().

Проверить серверную часть

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

Решение для проверки на стороне сервера зависит от вашей серверной технологии. Распространенные серверные языки программирования, такие как PHP, Node.js и Python, имеют встроенные библиотеки или функции для проверки электронной почты.

Заключение

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

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