- → Программирование
- → JavaScript
- → Уроки
Проверка надежности пароля, проверяем пароль на сложность с помощью jQuery
В этом уроке, мы создадим красивый индикатор надежности пароля. Он будет определять сложность пароля, и перемещать стрелку индикатора соответственно. В этом нам поможет новый jQuery плагин Complexify. Как только пароль будет достаточно надежным, пользователю можно будет продолжать процедуру регистрации.
Исходные файлы также доступны, вы сможете настроить дизайн так, как вам нравиться.
HTML
Мы начнем рассматривать из базовой HTML5 разметки, которая будет отображать форму регистрации пользователя. Эта форма будет служить примером практического применения индикатора сложности пароля. Если вы хотите использовать эту форму, как форму регистрации, нужно будет дописать серверную сторону кода, то есть PHP.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251" />
<title>Проверка сложности пароля на jQuery</title>
<!-- Стили -->
<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>Регистрируйтесь, это БЕСПЛАТНО!</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="Пароль" />
</div>
<div class="row pass">
<input type="password" id="password2" name="password2" placeholder="Повторите пароль" disabled="true" />
</div>
<!-- The rotating arrow -->
<div class="arrowCap"></div>
<div class="arrow"></div>
<p class="meterText">Надежность пароля</p>
<input type="submit" value="Регистрация" />
</form>
</div>
<footer>
<h2><i>Урок:</i> Написание скрипта проверки пароля на сложность</h2>
<a class="tzine" href="/material/proverka-nadezhnosti-parolya-jquery"> Перейдите на SiteAR.ru чтобы скачать этот пример</a>
</footer>
<!-- JavaScript подключения - jQuery, complexify плагин и наш 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 к .row div блоку, который содержит поле ввода. Этот класс отобразит красный крестик. В случае успешного результата, мы добавим класс success, который отобразит зеленую галочку. При нажатии кнопки регистрация, мы проверим, все ли поля ввода заполнены корректно. Вот так! Теперь рассмотрим сам код.
assets/js/script.js
$(function(){
var pass1 = $('#password1'),
pass2 = $('#password2'),
email = $('#email'),
form = $('#main form'),
arrow = $('#main .arrow');
// Очищаем поля при загрузке
$('#main .row input').val('');
// Обработчик коректности заполнения форм
form.on('submit',function(e){
// Все ли заполнено корректно?
if($('#main .row.success').length == $('#main .row').length){
// Да!
alert("Спасибо за тестирование данного примера!");
e.preventDefault(); // Удалите это, если хотите использовать форму для себя
}
else{
// Нет. Предотвращаем отправку данных с формы
e.preventDefault();
}
});
// Валидация поля email
email.on('blur',function(){
if (!/^\S+@\S+\.\S+$/.test(email.val())){
email.parent().addClass('error').removeClass('success');
}
else{
email.parent().removeClass('error').addClass('success');
}
});
// Здесь будет код плагина Complexify, который мы рассмотрим далее в уроке
// Валидируем второе поле ввода пароля
pass2.on('keydown input',function(){
// Убеждаемся, что пароли совпадают
if(pass2.val() == pass1.val()){
pass2.parent()
.removeClass('error')
.addClass('success');
}
else{
pass2.parent()
.removeClass('success')
.addClass('error');
}
});
});
В конце нашего пути, мы прикрутим плагин Complexify, который проверит надежность пароля. Плагин принимает callback функцию с двумя аргументами – процентное значение сложности пароля от 0 до 100, и параметр валидности valid, который содержит минимальную допустимую длину пароля в символах. Минимальная длина пароля устанавливается свойством minimumChars.
С помощью свойства strengthScaleFactor, мы можем установить минимальную сложность пароля, которая будет допустимой. Значение по умолчанию равно 1, согласно которому пароль должен содержать заглавные и прописные буквы, числа и специальные символы. Но для меня, это слишком сложные требования к паролю, поэтому устанавливаю на 0,7. Вы можете снизить этот показатель, если считаете что можно использовать пароли попроще.
// Используем Complexify плагин для валидации первого поля ввода пароля
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)';
// Вращаем стрелку
arrow.css({
'-moz-transform':prop,
'-webkit-transform':prop,
'-o-transform':prop,
'-ms-transform':prop,
'transform':prop
});
});
Если передано валидное значение, мы задействуем поле подтверждение пароля (оно отображено как неактивное). Также мы будем использовать CSS3 трансформации для вращения стрелки индикатора. Трансформация будет анимироваться благодаря свойству transition, которое вы сможете увидеть в разделе CSS кода. Стрелка будет вращаться от -134 к 134 градусам (нулевое значение устанавливает стрелку вертикально вверх).
CSS
Здесь мы рассмотрим только самые интересные моменты 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;
/* CSS3 анимация для вращения стрелки индикатора надежности пароля */
-moz-transition:0.3s;
-webkit-transition:0.3s;
-o-transition:0.3s;
-ms-transition:0.3s;
transition:0.3s;
/* Устанавливаем стрелку в изначальную позицию */
-moz-transform: rotate(-134deg);
-webkit-transform: rotate(-134deg);
-o-transform: rotate(-134deg);
-ms-transform: rotate(-134deg);
transform: rotate(-134deg);
}
/* Маленький кружочек, который над стрелкой */
#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. Наилучший способ изучить, как это все работает – исследовать работу демо скрипта с помощью Chrome Firebug играя со стилями.
Мы это сделали!
Основываясь на этом примере, вы можете реализовать красивую форму регистрации с валидацией в реальном времени. Благодаря исходникам, можете оптимизировать дизайн под свой сайт.
Благодарю за ваше внимание! Надеюсь, мой скрипт проверки пароля на сложность будет полезным для вас. С нетерпением жду ваших отзывов и ссылок на модернизированный скрипт этого урока.
Источник материала ...
Дальше: Создаем слайдер картинок на jQuery
Development — Taras Moroz