Как проверить e-mail в JavaScript, не используя PHP?

0
3914

Как проверить e-mail в JavaScript без PHP, то есть «чекнуть» валидность на стороне клиента? Для этого воспользуемся популярной библиотекой jQuery.

Нередко при регистрации нужно проверить правильность электронного адреса. Зачем? Чтобы пользователь не мог ввести несуществующий e-mail. Это быстрая проверка на стороне клиента, которая совершенно не заставит ждать. Если же ввод неправильный, пользователь получит сообщение об ошибке и возможность исправить введенный адрес.

Чтобы проверить e-mail в JavaScript, мы используем jQuery.

Регулярные выражения

В сети регулярок полно, но нужно понимать, каким именно следует воспользоваться. Вот часть кода:

Наше регулярное выражение выглядит следующим образом:

А вод полный программный код, который отвечает на поставленный вопрос:

Вот только вы должны помнить, что проверку следует также реализовать и на стороне сервера.

Вообще, полная проверка электронного адреса должна производиться именно на стороне сервера по факту отправки формы. Но основная идея состоит в том, чтобы как минимум корректность написания e-mail «прощупать» еще на стороне клиента и выдать предупреждающее сообщение, если введенное формату не соответствует.

Давайте рассмотрим проверку соответствия введенного текста формату e-mail адреса более подробно.

HTML-форма

Это будет несложная страничка с подключенной библиотекой jQuery. Обратите внимание, что в «голове» между тегами <script> </script> остается место для написания кода:

Событие с подвязанной проверкой поля

Данное событие вызывается в тот момент, когда элемент теряет фокус. На этом и будет основываться процесс проверки: пользователь задействует поле e-mail, введет в него электронный адрес и убирает курсор мышки. В этот момент теряется фокус элемента (поля для ввода e-mail) и происходит проверка:

Проверка на заполненность поля

Это первое, что делается перед тем, как проверить e-mail в JavaScript. Если поле оказывается пустым, мы «выбрасываем» предупреждение:

Валидация

Успех или провал — просто выведем сообщение о результате:

Вас также могут заинтересовать другие статьи по теме: