вход

Регистрационная форма с эластичным эффектом при помощи jQuery

Регистрационная форма с эластичным эффектом при помощи jQuery

Здравствуйте уважаемые читатели блога mainview.ru. Сегодня речь пойдет о регистрационной форме. Регистрация сейчас встречается довольно часто, на очень большом количестве сайтов. Для чего нужна регистрация? Главным образом для того, чтобы получить доступ к той информации, к которой незарегистрированные пользователи доступа не имеет.

Каждый может стать зарегистрированным пользователем, если он заполнит специальную форму, которая называется регистрационной. В ней он представляет некоторую личную информацию. Однако применение регистрации должно быть оправдано Пользователи не будут регистрироваться просто так на вашем сайте. Они, скорее всего, уйдут на аналогичный сайт, где подобная информация открыта.

Чтобы пользователи охотно регистрировались на сайте, вы должны произвести на них впечатление, создать красивую и привлекательную форму. Очевидно, что веб-разработчики должны создать одновременно интерактивную и простую форму для регистрации. Она не должна отнимать много времени на заполнение и быть понятной пользователю.

"Первое впечатление самое лучшее впечатление" не так ли?. Особенно если учесть, что на некоторых веб-сайтах первый шаг состоит как раз в регистрации. Итак, сегодня мы попробуем создать интерактивную форму регистрации с эластичным эффектом при помощи jQuery.

Как это выглядит

Регистрационная форма с эластичным эффектом при помощи jQuery

Сначала мы должны создать регистрационную форму с необходимыми полями.

<div id="form">
<h2>Регистрационная форма с эластичным эффектом при помощи jQuery</h2>
<form method="post" id="form-elements" >
<ul>
<li class="username">
<label>Пользователь: </label><br/> 
<input type="text" name="name" id="username" />
<span class="error"></span>
</li>
<li class="password">
<label>Пароль: </label><br/> 
<input type="password" name="password" id="password" />
<span class="error"></span>
</li>
<li class="email">
<label>Почтовый ящик: </label><br/> 
<input type="text" name="email" id="email" />
<span class="error"></span>
</li>
<li class="phone">
<label>Телефон: </label><br/> 
<input type="text" name="phone" id="phone" />
<span class="error"></span>
</li>
<li class="submit">
<input type="submit" value=" Регистрация " id='submit'/>
</li>
</ul>
</form>
</div>

Здесь мы создали форму с четырьмя полями ввода и кнопкой "регистрация", при нажатии на которую и происходит регистрация. По умолчанию она выглядит не очень стильно. Поэтому добавим ей стиль, чтобы она выглядела лучше.

<style>
	body
	{
		font-family:Arial, Helvetica, sans-serif
	}
	h1, h2
	{
		font-family:'Georgia', Times New Roman, Times, serif;
	}
	h2
	{
		color:#999;
	}
	ul
	{
		padding:0px;
		margin:0px;
		list-style:none;
	}
	li
	{
		padding:5px;
		display:none;
	}
	label
	{
		font-size:14px;
		font-weight:bold;
	}
	input[type="text"], input[type="password"]
	{
		-moz-border-radius: 6px 6px 6px 6px;
		-moz-box-shadow: 3px 5px 10px #78D8F2;
		border: 1px solid #05BBED;
		font-size: 15px;
		margin: 8px;
		padding: 6px;
		width: 220px;
	}
	input[type="submit"]
	{
		background-color: #078EA0;
		border: 1px solid #0094A7;
		color: #FFFFFF;
		font-size: 14px;
		padding: 4px;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;

	}
	.error
	{
		font-size:11px;
		color:#cc0000;
		padding:4px;
	}

	#form
	{
		width:415px;
		margin:0 auto;
		margin-top:30px;
	}
	#form-elements {
		border: 1px solid #aeaeae;
		background-color: #F2F2F2;
		padding: 14px;
	}
</style>

Теперь самое время сделать эту форму интерактивной, и добавить некоторые эффекты при помощи JQuery.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js.js"></script>
<script type="text/javascript">
	$(function() 
	{
		$("ul li:first").show();
		var ck_username = /^[A-Za-z0-9_]{5,20}$/;
		var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i 
		var ck_password =  /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;
		var ck_phone = /^[0-9-]{10,20}$/;
		$('#username').keyup(function()
		{
			var username=$(this).val();
			if (!ck_username.test(username)) 
			{
			 	$(this).next().show().html("Минимум 5 знаков");
			}
			else
			{
				$(this).next().hide();
				$("li").next("li.password").slideDown({duration: 'slow',easing: 'easeOutElastic'});
			}
		});

		$('#password').keyup(function()
		{
			var password=$(this).val();
			if (!ck_password.test(password)) 
			{
			 	$(this).next().show().html("Минимум 6 знаков");
			}
			else
			{
				$(this).next().hide();
				$("li").next("li.email").slideDown({duration: 'slow',easing: 'easeOutElastic'});
			}
		});
		$('#email').keyup(function()
		{
			var email=$(this).val();
			if (!ck_email.test(email)) 
			{
			 	$(this).next().show().html("Укажите реальный ящик");
			}
			else
			{
				$(this).next().hide();
				$("li").next("li.phone").slideDown({duration: 'slow',easing: 'easeOutElastic'});
			}
		});
		$('#phone').keyup(function()
		{
			var phone=$(this).val();
			if (!ck_phone.test(phone)) 
			{
			 	$(this).next().show().html("Минимум 10 знаков");
			}
			else
			{
				$(this).next().hide();
				$("li").next("li.submit").slideDown({duration: 'slow',easing: 'easeOutElastic'});
			}
		});
		
		$('#submit').click(function()
		{
			var email=$("#email").val();
			var username=$("#username").val();
			var password=$("#password").val();
			if(ck_email.test(email) && ck_username.test(username) && ck_password.test(password) )
			{
				$("#form").show().html("<h1>Спасибо за регистрацию!</h1><p>Вы успешно зарегистрированы в системе</p>");
			}
			return false;
		});
	})
</script>

В этом сценарии, мы делаем видимым только первое поле. Когда пользователь правильно заполнит его, то будет показано следующее поле. Так, этот процесс будет продолжаться до конца, пока не откроется вся форма. Для этого используем эластичный JQuery эффект.

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
4 комментария

Статья → Регистрационная форма с эластичным эффектом при помощи jQuery

  1. Интересно, но оно правда не работает, если данные вставлять с помощью функции в опере “Вставить личные данные”.
    А вообще практика всегда хорошо, особенно по Jquery, спасибо за статью.
    ps: во второй строчке ошибка ;)

  2. Kama:

    Все конечно хорошо и познавательно, только какая-та непрактичная эта форма – гораздо удобнее когда сразу видишь все поля…

  3. Николай:

    Да, форма не совсем привычная, но главная цель урока – показать как это работает, а применение возможно и найдется.

  4. Николай:

    Клевая штука! Выложите пожалуйста исходники! Там файлов нехватает!

Оставить комментарий

Статья → Регистрационная форма с эластичным эффектом при помощи jQuery

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.