Как сделать валидацию Email на Javascript

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

Задача:

Есть текстовое поле, куда пользователь должен вводить E-mail.

• Если поле проходит валидацию — оно должно иметь зеленую подсветку;
• Если нет — красную.

Фронтенд-разработчик — с нуля до трудоустройства за 10 месяцев

• Постоянная поддержка от наставника и учебного центра
• Помощь с трудоустройством
• Готовое портфолио к концу обучения
• Практика с первого урока

Вы получите именно те инструменты и навыки, которые позволят вам найти работу

Узнать больше

Первым делом добавляем input в HTML. Здесь все просто:

input(type='email' placeholder='E-mail')

Для простоты восприятия предположим, что больше на странице ничего нет, поэтому не станем добавлять лишние атрибуты.

Так как подсветка должна меняться в реальном времени, добавим «слушатель» на input:

const input = document.querySelector('input');
input.addEventListener('input', onInput);

Функция onInput будет менять цвет css-свойства border на зеленый, если введенный в input текст валиден, или на красный — если нет.

const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;

const input = document.querySelector('input');

function onInput() {
  if (isEmailValid(input.value)) {
    input.style.borderColor = 'green';
  } else {
    input.style.borderColor = 'red';
  }
}

input.addEventListener('input', onInput);

function isEmailValid(value) {
return EMAIL_REGEXP.test(value);

Функция isEmailValid будет сравнивать введенное пользователем значение с регулярным выражением. В успешном случае функция вернет true, иначе — false.

Вот и все! Скрипт готов. Его работу вы можете проверить в моем Codepen.

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

Узнать больше