Рассказываю, как с помощью регулярного выражения осуществить валидацию адреса электронной почты.
Есть текстовое поле, куда пользователь должен вводить E-mail.
Первым делом добавляем 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.