Мы также предлагаем вам PSD-файл, с помощью которого вы сможете оформить форму по собственному вкусу.
HTML
Начнем с разработки стандартного HTML-документа, который будет включать в себя форму регистрации. Форма будет служить лишь примером для измерителя сложности пароля, поэтому если вам захочется, чтобы она функционировала, вам придется писать соответствующий код на стороне сервера.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How to Make a Beautiful Password Strength Indicator</title>
<!-- The stylesheet -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<h1>Sign up, it's FREE!</h1>
<form class="" method="post" action="">
<div class="row email">
<input type="text" id="email" name="email" placeholder="Email" />
</div>
<div class="row pass">
<input type="password" id="password1" name="password1" placeholder="Password" />
</div>
<div class="row pass">
<input type="password" id="password2" name="password2" placeholder="Password (repeat)" disabled="true" />
</div>
<!-- The rotating arrow -->
<div class="arrowCap"></div>
<div class="arrow"></div>
<p class="meterText">Password Meter</p>
<input type="submit" value="Register" />
</form>
</div>
<!-- javascript includes - jQuery, the complexify plugin and our own script.js -->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="assets/js/jquery.complexify.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>Мы включаем последнюю версию jQuery, плагин Complexify и файл script.js перед закрывающим тэгом «body» для лучшей производительности.
jQuery
Код jQuery ниже вполне понятен. Мы привязываем несколько событий к элементу формы и валидируем их. Если возникнет ошибка, мы задаем класс error div’у .row, который содержит в себе форму. За счет этого будет отображаться красный крест. Класс success, наоборот, будет отображать зеленую отметку. Когда форма будет подтверждена, нам нужно проверить, все ли поля отмечены как подтвержденные, чтобы пользователь смог продолжить процесс регистрации.
assets/js/script.js
$(function(){
// Form items
var pass1 = $('#password1'),
pass2 = $('#password2'),
email = $('#email'),
form = $('#main form'),
arrow = $('#main .arrow');
// Empty the fields on load
$('#main .row input').val('');
// Handle form submissions
form.on('submit',function(e){
// Is everything entered correctly?
if($('#main .row.success').length == $('#main .row').length){
// Yes!
alert("Thank you for trying out this demo!");
e.preventDefault(); // Remove this to allow actual submission
}
else{
// No. Prevent form submission
e.preventDefault();
}
});
// Validate the email field
email.on('blur',function(){
// Very simple email validation
if (!/^S+@S+.S+$/.test(email.val())){
email.parent().addClass('error').removeClass('success');
}
else{
email.parent().removeClass('error').addClass('success');
}
});
/* The Complexify code will go here */
// Validate the second password field
pass2.on('keydown input',function(){
// Make sure it equals the first
if(pass2.val() == pass1.val()){
pass2.parent()
.removeClass('error')
.addClass('success');
}
else{
pass2.parent()
.removeClass('success')
.addClass('error');
}
});
});И здесь мы можем перейти к плагину Complexify, который будет валидировать пароль. Плагин принимает две функции обратного вызова с двумя аргументами: процентным значением от 0 до 100 в зависимости от сложности пароля, а также отметкой валидности, которая учитывает минимальную длину пароля, определенную параметром minimumChars.
Изменяя параметр strengthScaleFactor, вы можете позволить пользователям вводить более легкие пароли. Исходное значение 1, что требует смеси символов в разном регистре, цифры и специальные символы, но нам такие условия показались сильно сложными, и поэтому мы снизили планку до 0.7. Вы можете сделать ее еще ниже, если хотите позволить использовать более простые пароли.
pass1.complexify({minimumChars:6, strengthScaleFactor:0.7}, function(valid, complexity){
if(valid){
pass2.removeAttr('disabled');
pass1.parent()
.removeClass('error')
.addClass('success');
}
else{
pass2.attr('disabled','true');
pass1.parent()
.removeClass('success')
.addClass('error');
}
var calculated = (complexity/100)*268 - 134;
var prop = 'rotate('+(calculated)+'deg)';
// Rotate the arrow. Additional rules for different browser engines.
arrow.css({
'-moz-transform':prop,
'-webkit-transform':prop,
'-o-transform':prop,
'-ms-transform':prop,
'transform':prop
});
});Если было введено валидное значение, мы открываем доступ ко второму полю (по умолчанию оно отключено). Мы также воспользуемся трансформациями CSS3 для того, чтобы вращать стрелочку. Трансформация будет анимирована при помощи параметра transition, который вы можете видеть в разделе CSS. Стрелка сдвигается от -134 до 134 градусов (по умолчанию 0 градусов заставляют стрелку показывать вверх), что позволяет нам избежать нагромождения в коде.
CSS
Мы включим только самые интересные части каскадных таблиц стилей. Код, который следует за стилизацией стрелки и определяет переход.
assets/css/styles.css
#main form .arrow{
background: url("../img/arrow.png") no-repeat -10px 0;
height: 120px;
left: 214px;
position: absolute;
top: 392px;
width: 11px;
/* Defining a smooth CSS3 animation for turning the arrow */
-moz-transition:0.3s;
-webkit-transition:0.3s;
-o-transition:0.3s;
-ms-transition:0.3s;
transition:0.3s;
/* Putting the arrow in its initial position */
-moz-transform: rotate(-134deg);
-webkit-transform: rotate(-134deg);
-o-transform: rotate(-134deg);
-ms-transform: rotate(-134deg);
transform: rotate(-134deg);
}
/* The small piece that goes over the arrow */
#main form .arrowCap{
background: url("../img/arrow.png") no-repeat -43px 0;
height: 20px;
left: 208px;
position: absolute;
top: 443px;
width: 20px;
z-index: 10;
}Остальной код вы можете самостоятельно изучить в assets/css/styles.css. Лучшим методом разобрать, как здесь все утроено, является осмотр действующего в режиме реального времени демо с помощью Firebug или инструментов разработчика от Chrome.
В завершение
Вы можете использовать данный пример для того, чтобы создавать собственные вариации. А процесс оформления облегчается за счет предоставленного PSD-файла.
Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
