Как сделать проверку электронной почты в JavaScript? [С примерами]
Опубликовано: 2021-02-23JavaScript — это язык программирования, предназначенный для создания приложений. Это намного быстрее, чем другие языки, потому что он очень легкий и простой в использовании. Он используется для создания хорошо разработанных приложений.
Проверка электронной почты в JavaScript важна для удобства пользователей при создании веб-приложений. Проверка помогает передавать достоверную информацию на сервер от клиента веб-приложения.
Оглавление
Что такое валидация?
Валидация относится к процессу проверки значений, которые вводит пользователь. Он играет решающую роль в создании приложений и повышает удобство работы пользователей. Многие поля, такие как номера мобильных телефонов, адреса электронной почты, даты и пароли, проверяются в ходе этого процесса.
JavaScript ускоряет процесс проверки благодаря более быстрой обработке данных, чем другие проверки на стороне сервера. Теперь давайте посмотрим на реализацию проверки электронной почты в JavaScript .
Проверка электронной почты в JavaScript
Проверка электронной почты — одна из важнейших частей аутентификации HTML-формы. Электронная почта — это подмножество или строка символов ASCII, разделенная на две части с помощью символа @. Его первая часть состоит из частной информации, а вторая содержит доменное имя, на которое регистрируется электронная почта.
Вот символы ASCII первой части:
- Специальные символы, такие как # * + & '! %@? {^} ”
- Числовые символы (от 0 до 9)
- Точка, точка и т. д. с условием, что это не может быть последняя или самая первая буква письма и не может повторяться после другой.
- Алфавиты верхнего регистра (от A до Z) и алфавиты нижнего регистра (от a до z)
Вторая часть включает в себя следующее:
- Точки
- Цифры
- Дефисы
- Письма
Использование регулярных выражений — один из лучших способов проверки электронной почты в JavaScript . Он использует регулярные выражения для определения шаблона символа.
Некоторые из примеров действительного идентификатора электронной почты:
- [email protected]
- Владелец сайта@up.down.net
- [email protected]
Некоторые другие примеры недопустимого идентификатора электронной почты
- [email protected] (не допускаются точки друг на друге)
- Inownzsite()&@abcd.com (в регулярном выражении разрешены только символы, тире, символы подчеркивания и цифры.)
- Наш сайтismne.azbyz.com (здесь символа @ нет)
- [email protected] (Здесь домен верхнего уровня не может начинаться с точки)
- @youmenandwe.we.net (здесь он не может начинаться с символа @)
- [email protected] («.b» не является допустимым доменом верхнего уровня) email.js
Файл состоит из кода JavaScript, необходимого для проверки электронной почты. Здесь регулярные выражения используются для проверки электронной почты на стороне клиента приложения.
Контрольные точки для эффективной проверки электронной почты в коде JavaScript:
- Описать регулярное выражение для проверки адреса электронной почты
- Если входное значение соответствует регулярным выражениям
- Если он совпадает, отправляет предупреждение о том, что «адрес электронной почты действителен».
- Если он не совпадает, отправьте предупреждение со словами «адрес электронной почты недействителен».
Связанный: Проверка пароля в Javascript
Код проверки электронной почты в JavaScript
Ниже приведен код проверки электронной почты в JavaScript. Этот код может проверить, является ли адрес электронной почты, созданный или введенный пользователем, действительным или нет. Сохраните файл как имя_файла.js.
// Фрагмент кода
функция EmailValidation(введенныйEmail)
{
var mail_format = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
если (введенный адрес электронной почты. значение. совпадение (введенный адрес электронной почты))
{
alert("Да! Действительный адрес электронной почты!");
документ.form1.text1.focus();
вернуть истину;
}
Еще
{
alert("Извините! Неверный адрес электронной почты!");
документ.form1.text1.focus();
вернуть ложь;
}
}
Функция JavaScript используется в форме HTML, как показано ниже. Сохраните файл как имя_файла.html:
<!ДОКТИП HTML>
<html lang="ru">
<голова>
<метакодировка="utf-8">
<title>проверка электронной почты в JavaScript</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</голова>
<body onload='document.form1.text1.focus()'>
<div class="почта">
<h2>Введите адрес электронной почты для проверки</h2>
<имя формы=”form1″ действие=”#”>
<ул>
<li><input type='text' name='text1'/></li>
<li> </li>
<li class=”Проверить”><input type=”submit” name=”Проверить” value=”Проверить” onclick=”ПроверитьEmail(document.form1.text1)”/></li>
<li> </li>
</ul>
</форма>
</div>
<script src="имя_файла.js"></script>
</тело>
</html>
Следующий код может добавить стиль к форме с помощью CSS. Сохраните файл как имя_файла.css.
li {тип стиля списка: нет;
размер шрифта: 16pt;
}
.Почта {
маржа: авто;
отступы сверху: 20px;
нижний отступ: 20px;
ширина: 850 пикселей;
фон: RGB(150, 195, 208);
граница: 1 пикс. RGB (1, 20, 24);
}
.почта h2 {
поле слева: 36px;
}
Вход {
размер шрифта: 28pt;
}
ввод: фокус, текстовая область: фокус {
цвет фона: белый;
}
ввод отправить {
размер шрифта: 18pt;
}
Теперь вы можете выполнить код HTML и выполнить проверку электронной почты в JavaScript .
Читайте: Проекты Javascript в GitHub
Изучайте онлайн-курсы по программному обеспечению от лучших университетов мира. Участвуйте в программах Executive PG, Advanced Certificate Programs или Master Programs, чтобы ускорить свою карьеру.
Заключение
Проверка электронной почты очень важна, чтобы избежать создания недействительных адресов электронной почты. В этой статье с помощью кода объясняется, как проверить, действителен ли идентификатор электронной почты, и позволить системе проверить и уведомить пользователя, если введенный идентификатор электронной почты недействителен.
Если вам интересно узнать больше о разработке полного стека, ознакомьтесь с программой Executive PG upGrad и IIIT-B по разработке программного обеспечения с полным стеком, которая предназначена для работающих профессионалов и предлагает более 500 часов тщательного обучения, более 9 проектов и заданий. , статус выпускника IIIT-B, практические практические проекты и помощь в трудоустройстве в ведущих фирмах.
