Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Красивый измеритель силы пароля на 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');
}
});
});
Первым делом мы создаем переменные, через которые сможем работать с объектами страницы - полями, самой формой и стрелкой. Далее мы указыаем, что при загрузке страницы поля формы должны очищаться.
Мы отслеживаем отправку формы через событие 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 и другие веб-технологии:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
