Красивый измеритель силы пароля на CSS3 и jQuery
 |
 |
Исходники |
Пример |
В этом уроке мы создадим красивый измеритель силы пароля. Он будет определять сложность пароля и соответствующим образом менять положение специальной стрелки с помощью jQuery-плагина Complexify.
Только после задания пароля не ниже определенного уровня сложности пользователь сможет продолжить дальнейший ввод данных.
Итак, давайте рассмотрим последовательно весь код данного примера.
HTML
Мы начинаем с обычного документа HTML5, который будет содержать регистрационную форму.
Форма создана только для демонстрации работы измерителя силы пароля, поэтому, если вам нужно действительно производить регистрацию, то нужно будет дописать соответствующую серверную часть скрипта, принимающую и обрабатывающую данные из формы.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Красивый измеритель силы пароля на CSS3 и jQuery</title>
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.complexify.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="main">
<h1>Зарегистрируйтесь</h1>
<form 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>
<!-- Измерительная стрелка -->
<div class="arrowCap"></div>
<div class="arrow"></div>
<p class="meterText">Сила <br /> пароля</p>
<input type="submit" value="Зарегистрироваться" />
</form>
</div>
</body>
</html>
В тэге head мы подключаем файл стилей а также необходимые JavaScript-файлы:
- свежую версию библиотеки jQuery;
- плагин Complexify;
- наш собственный самописный файл script.js.
В форме регистрации нет ничего особенного. Единственное, что можно отметить - это использование атрибута placeholder для того, чтобы в полях изначально стояли заданные нами значения.
Также мы используем внутри формы два блока div, отвечающих за отображение измерительной стрелки.
jQuery
Теперь давайте рассмотрим код файла script.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("Благодарим вас за использование демо!");
}
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 для первого поля ввода пароля
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
});
});
// Проверяем второе поле для ввода пароля
pass2.on('keydown input',function(){
// Убеждаемся, что его значение равно значению первого поля
if(pass2.val() == pass1.val())
{
pass2.parent()
.removeClass('error')
.addClass('success');
}
else
{
pass2.parent()
.removeClass('success')
.addClass('error');
}
});
});
Первым делом мы создаем переменные, через которые сможем работать с объектами страницы - полями, самой формой и стрелкой. Далее мы указыаем, что при загрузке страницы поля формы должны очищаться.
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Зарегистрироваться и Начать продвижение
Мы отслеживаем отправку формы через событие submit для кнопки и проверяем корректность заполнения. В случае успеха выводим соответствующее сообщение, а в случае неудачи - предотвращаем отправку формы.
По факту потери фокуса полем для ввода Email мы проводим его простую валидацию и присваиваем ему класс error или success в зависимости от результата проверки. В одном случае в поле появится красный крестик, а в другом - зеленая галочка, свидетельствующая о том, что все в порядке.
Примерно то же самое происходит и с проверкой полей для ввода пароля.
Плагину Complexify передается два параметра.
Первый из них определяет, когда пароль будет считаться валидным, т.е. подходить по формату. В нашем примере для этого в пароле должно быть не меньше 6 символов (minimumChars:6).
Второй же параметр определяет необходимую для прохождения проверки сложность пароля (strengthScaleFactor:0.7). Чем меньше значение (например, 0.2), тем менее требователен будет плагин к сложности пароля, и наоборот. Вариант со значением 0.7 можно считать оптимальным в большинстве случаев.
Дальнейших принцип точно такой же: если пароль не проходит проверку, то полю присваивается класс error и справа отображается красный крестик, если же проходит, то класс success дает нам справа зеленую галочку.
Если первое поле для ввода пароля прошло проверку успешно, то становится активным второе поле (для повторения ввода пароля), которое до этого было неактивно.
Для перемещения стрелки используется свойство CSS3 transition. Стрелка перемещается в диапазоне от -134 до 134 градусов (0 соответствует ориентации строго вверх), что и отражено при задании стилей.
И, последний момент, о котором мы еще не упоминали - это проверка того, чтобы пароль, введенный во второе поле соответствовал паролю, который был введен в первое поле. Иными словами, мы проверяем, чтобы сам пароль и его подтверждение совпадали.
По результату этой проверки мы присваиваем уже знакомые нам классы error или success второму полю для ввода пароля.
CSS
Здесь я привожу лишь наиболее интересный фрагмент, отвечающий за работу измерительной стрелки. Весь css-код доступен в исходниках, приложенных к уроку.
/* Стрелка */
#main form .arrow{
background: url("../img/arrow.png") no-repeat -10px 0;
height: 120px;
left: 214px;
position: absolute;
top: 392px;
width: 11px;
/* Плавная анимация для стрелки */
-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;
}
Лучший способ разобраться, как все это работает - это просмотр демонстрации с запущенным плагином Firebug, а также самостоятельное внесение изменений с отслеживанием получившегося результата.
Именно так вы быстрее всего разберетесь с тем, как это функционирует и сможете вносить в скрипт свои добработки, если это будет необходимо.
— Разгрузит мастера, специалиста или компанию;
— Позволит гибко управлять расписанием и загрузкой;
— Разошлет оповещения о новых услугах или акциях;
— Позволит принять оплату на карту/кошелек/счет;
— Позволит записываться на групповые и персональные посещения;
— Поможет получить от клиента отзывы о визите к вам;
— Включает в себя сервис чаевых.
Для новых пользователей первый месяц бесплатно. Зарегистрироваться в сервисе
По материалам tutorialzine.com
Перевод - Дмитрий
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить JavaScript, CSS, HTML, PHP и другие веб-технологии:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
