0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p><strong>Рассказываю, как с помощью регулярного выражения осуществить валидацию адреса электронной почты.</strong></p>
1
<p><strong>Рассказываю, как с помощью регулярного выражения осуществить валидацию адреса электронной почты.</strong></p>
2
<p>Задача:</p>
2
<p>Задача:</p>
3
<p>Есть текстовое поле, куда пользователь должен вводить E-mail.</p>
3
<p>Есть текстовое поле, куда пользователь должен вводить E-mail.</p>
4
<ul><li>Если поле проходит валидацию - оно должно иметь зеленую подсветку;</li>
4
<ul><li>Если поле проходит валидацию - оно должно иметь зеленую подсветку;</li>
5
<li>Если нет - красную.</li>
5
<li>Если нет - красную.</li>
6
</ul><p>Первым делом добавляем input в HTML. Здесь все просто:</p>
6
</ul><p>Первым делом добавляем input в HTML. Здесь все просто:</p>
7
<p><em>Для простоты восприятия предположим, что больше на странице ничего нет, поэтому не станем добавлять лишние атрибуты.</em></p>
7
<p><em>Для простоты восприятия предположим, что больше на странице ничего нет, поэтому не станем добавлять лишние атрибуты.</em></p>
8
<p>Так как подсветка должна меняться в реальном времени, добавим "слушатель" на input:</p>
8
<p>Так как подсветка должна меняться в реальном времени, добавим "слушатель" на input:</p>
9
<p>Функция onInput будет менять цвет css-свойства border на зеленый, если введенный в input текст валиден, или на красный - если нет.</p>
9
<p>Функция onInput будет менять цвет css-свойства border на зеленый, если введенный в input текст валиден, или на красный - если нет.</p>
10
<p>Функция isEmailValid будет сравнивать введенное пользователем значение с регулярным выражением. В успешном случае функция вернет true, иначе - false.</p>
10
<p>Функция isEmailValid будет сравнивать введенное пользователем значение с регулярным выражением. В успешном случае функция вернет true, иначе - false.</p>
11
<p>Вот и все! Скрипт готов. Его работу вы можете проверить в моем<a>Codepen</a>.</p>
11
<p>Вот и все! Скрипт готов. Его работу вы можете проверить в моем<a>Codepen</a>.</p>