Библиотека программиста 17 апреля 2018

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

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

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

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

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

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

function validateEmail(email) {
    var pattern  = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\
[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return pattern .test(String(email).toLowerCase());
}

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

var pattern  = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))
@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

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

function validateEmail(email) {
  var pattern  = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\
[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return pattern .test(email);
}

function validate() {
  var $result = $("#result");
  var email = $("#email").val();
  $result.text("");

  if (validateEmail(email)) {
    $result.text(email + " подтвержден.");
  } else {
    $result.text(email + " не подтвержден.");
  }
  return false;
}

$("#validate").bind("click", validate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <p>Введите e-mail:</p>
  <input id='email'>
  <button type='submit' id='validate'>Подтвердить</button>
</form>

<h2 id='result'></h2>

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

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

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

HTML-форма

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	 <title>Наш пример</title>
	 <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
	 <script type="text/javascript">
		// Место для кода
	 </script>
</head>
<body>
	<h2>Проверка email</h2>
	<form method="post" action="#">
		<p>
			<input type="text" id="email" />
			<span id="valid"></span>
		</p>
		<p>
			<input type="submit" value="Отправить" />
		</p>
	</form>
</body>
</html>

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

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

$(document).ready(function() {
	$('#email').blur(function() {
		// Обработка события
	});
});

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

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

$(document).ready(function() {
	$('#email').blur(function() {
		if($(this).val() != '') {
			// Здесь происходит дальнейшая проверка
		} else {
			// Предупреждающее сообщение
			$(this).css({'border' : '1px solid #ff0000'});
			$('#valid').text('Поле пустое. Введите e-mail.');
		}
	});
});

Валидация

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

var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
	if(pattern.test($(this).val())){
		$('#valid').text('Верно');
	} else {
		$('#valid').text('Не верно');
	}

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

Комментарии

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ