Валидация Email на Javascript⁠⁠

Задача:

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

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

- Если нет — красную.

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

<input type="email" placeholder="E-mail">

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

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

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

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

const INPUT = document.querySelector('input');
function updateInput() {
if (validateEmail(INPUT.value)) INPUT.style.borderColor = 'green';
else INPUT.style.borderColor = 'red';
}
INPUT.addEventListener('input', updateInput);

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

const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;
const INPUT = document.querySelector('input');
function validateEmail(value) {
return EMAIL_REGEXP.test(value);
}
function updateInput() {
if (validateEmail(INPUT.value)) INPUT.style.borderColor = 'green';
else INPUT.style.borderColor = 'red';
}
INPUT.addEventListener('input', updateInput);

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