Регистрационная форма с эластичным эффектом при помощи 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 комментария

  1. Николай19/08/2011
  2. Kama10/06/2011
    • Николай10/06/2011
  3. Faraday09/06/2011

Добавить коментарий

тринадцать − восемь =