Валидация email на jQuery

Валидация email на jQueryОчень часто при создании форм регистрации, требуется проверить валидность (правильность) введенного email. Это необходимо, чтобы пользователи не могли писать несуществующие email адреса. Разумеется полную проверку email необходимо производить на стороне сервера (после того, как форма была отправлена). Но ведь и перед отправкой формы, email лучше проверить на стороне клиента. Чтобы в случае неправильного ввода, пользователю было выведено специальное сообщение и он сразу же мог исправить свой email.

Именно о проверке email на стороне клиента и пойдет речь в данной статье. Реализовывать мы это будем на jQuery, поэтому чтобы вы все поняли, желательно знать базовые особенности работы с этим фрейворком.

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

Шаг 1 - Подготовка. Создаем форму на HTML

Создаем простую страничку на HTML. Обращаю ваше внимание, что к ней обязательно должна быть подключена библиотека jQuery.

Также между тегами head, мы открыли конструкцию script, где собственно и будем писать сам код.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Валидация email на jQuery</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>

Шаг 2 - Задаем на событие blur проверку поля

Если пользователь кликнет по полю ввода email, то данное поле получает фокус. После того, как пользователь введет email и уберет курсор мыши из поля, фокус теряется и наступает событие blur. Именно на данное событие мы и повесили обработчик.

$(document).ready(function() {
	$('#email').blur(function() {
		// Здесь будем писать код обработки события
	});
});

Шаг 3 - Проверяем, не является ли поле пустым

Перед тем как начать валидацию введенного email, необходимо проверить, а ввел ли вообще пользователь что-нибудь? Потому что, поле может быть пустым.

Если оно оказалось пустым, то мы выводим предупреждающее сообщение об этом.

$(document).ready(function() {
	$('#email').blur(function() {
		if($(this).val() != '') {
			// Поле email заполнено (здесь будем писать код валидации)
		} else {
			// Поле email пустое, выводим предупреждающее сообщение
			$(this).css({'border' : '1px solid #ff0000'});
			$('#valid').text('Поле email не должно быть пустым');
		}
	});
});

Шаг 4 - Делаем полную проверку введенного email

Если поле было заполнено, мы проверяем, соответствует ли строка введенная пользователем, формату email адреса. Если это так, то поле ввода обводиться зеленой рамкой, если нет, то - красной.

		$(document).ready(function() {
			$('#email').blur(function() {
				if($(this).val() != '') {
					var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
					if(pattern.test($(this).val())){
						$(this).css({'border' : '1px solid #569b44'});
						$('#valid').text('Верно');
					} else {
						$(this).css({'border' : '1px solid #ff0000'});
						$('#valid').text('Не верно');
					}
				} else {
					$(this).css({'border' : '1px solid #ff0000'});
					$('#valid').text('Поле email не должно быть пустым');
				}
			});
		});

Вот и все! Мы с вами реализовали поставленные задачи, но при этом также хотелось еще раз напомнить, что на данный тип проверки (проверка на стороне клиента) не нужно полагаться целиком. Поэтому не забывайте всегда проверять полученные данные уже на стороне сервера.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (2)

Tutanhamon 29 января 2015 г. в 01:42

Неплохой обзор. Вообще, валидация имеет свои особенности и тонкости. Все очень сильно зависит от задач. Так, например, если формы не используют html тег "form", что особенно характерно для приложений с кучей скриптов, то большинство плагинов попросту не обработают формы на div-ах. Так же все зависит еще от способа валидации. Например, на многих формах просят указать поле Url. С одной стороны, поле не обязательное. С другой стороны, если пользователь его заполняет, то такое поле так же необходимо проверять на валидность. Ведь кривой Url в последующем может привести к ошибкам. Если интересно, то более подробно об этом можно узнать в обзоре по адресу http://ida-freewares.ru/validatsiya-polej-proizvolnykh-form-i-kontejnerov-na-jquery.html

Ответить

Артем 2 июля 2014 г. в 17:10

СУпер!! спасибо!!!

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад