Индикатор надежности пароля
В этом уроке мы будем создавать красивый индикатор надежности пароля. Он будет определять сложность пароля и двигаться с помощью нового плагина JQuery . После того, когда пароль будет достаточно сложный, пользователь сможет продолжить свою регистрацию.
ДЕМО СКАЧАТЬ
HTML
Мы начнем с документа HTML5, который будет включать нашу регистрационную форму. Форма будет служить лишь в качестве примера счетчика пароля - если вам нужна поддержка для реальных регистраций, вам нужно будет написать необходимый код на стороне сервера.
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
Код JQuery который приведен ниже довольно прост. Мы связываем ряд мероприятий для элементов формы и проверки их. Если произошла ошибка, мы добавляем "класс ошибка", который содержит входные данные. На экране появится красный крестик. " Класс успех ", с другой стороны появится зеленая галочка.
активы / 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');
}
});
});
|
Плагин принимает функцию обратного вызова с двумя аргументами - значение в процентах от 0 до 100 в зависимости от сложности пароля, учитывающий минимальные требования, длину, определяемую minimumChars.
Масштаб по умолчанию является 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 преобразования, чтобы поворачивать стрелку. Преобразование будет анимационным , которое можно увидеть в разделе CSS. Стрелка перемещается от -134 до 134 градусов (по умолчанию 0 градусов соответствует вертикальной стрелке), так что код компенсирует это.
CSS
Я буду включать только наиболее интересные части таблицы стилей. Приведенный ниже код стилей стрелки и определения перехода.
активы / 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;
}
|
Вы можете найти остальную часть кода в активах / CSS / styles.css .
Мы закончили!
ДЕМО СКАЧАТЬ
Источник
|
