Главная > Руководства > Разрабатываем привлекательный измеритель безопасности пароля
Разрабатываем привлекательный измеритель безопасности пароля12 июля 2012, 14:00. Разместил: Design FactoRy |
Сегодня мы с вами займемся разработкой красивого индикатора уровня безопасности вашего пароля. Он поможет определить сложность пароля, а ползунок будет перемещаться соответствующим образом при помощи jQuery-плагина Complexify. Только когда будет введен достаточно сложный пароль, пользователь сможет продолжить процесс регистрации. Мы также предлагаем вам PSD-файл, с помощью которого вы сможете оформить форму по собственному вкусу. HTML Начнем с разработки стандартного HTML-документа, который будет включать в себя форму регистрации. Форма будет служить лишь примером для измерителя сложности пароля, поэтому если вам захочется, чтобы она функционировала, вам придется писать соответствующий код на стороне сервера. index.html
Мы включаем последнюю версию jQuery, плагин Complexify и файл script.js перед закрывающим тэгом «body» для лучшей производительности. jQuery Код jQuery ниже вполне понятен. Мы привязываем несколько событий к элементу формы и валидируем их. Если возникнет ошибка, мы задаем класс error div’у .row, который содержит в себе форму. За счет этого будет отображаться красный крест. Класс success, наоборот, будет отображать зеленую отметку. Когда форма будет подтверждена, нам нужно проверить, все ли поля отмечены как подтвержденные, чтобы пользователь смог продолжить процесс регистрации. assets/js/script.js
И здесь мы можем перейти к плагину Complexify, который будет валидировать пароль. Плагин принимает две функции обратного вызова с двумя аргументами: процентным значением от 0 до 100 в зависимости от сложности пароля, а также отметкой валидности, которая учитывает минимальную длину пароля, определенную параметром minimumChars. Изменяя параметр strengthScaleFactor, вы можете позволить пользователям вводить более легкие пароли. Исходное значение 1, что требует смеси символов в разном регистре, цифры и специальные символы, но нам такие условия показались сильно сложными, и поэтому мы снизили планку до 0.7. Вы можете сделать ее еще ниже, если хотите позволить использовать более простые пароли.
Если было введено валидное значение, мы открываем доступ ко второму полю (по умолчанию оно отключено). Мы также воспользуемся трансформациями CSS3 для того, чтобы вращать стрелочку. Трансформация будет анимирована при помощи параметра transition, который вы можете видеть в разделе CSS. Стрелка сдвигается от -134 до 134 градусов (по умолчанию 0 градусов заставляют стрелку показывать вверх), что позволяет нам избежать нагромождения в коде. CSS Мы включим только самые интересные части каскадных таблиц стилей. Код, который следует за стилизацией стрелки и определяет переход. assets/css/styles.css
Остальной код вы можете самостоятельно изучить в assets/css/styles.css. Лучшим методом разобрать, как здесь все утроено, является осмотр действующего в режиме реального времени демо с помощью Firebug или инструментов разработчика от Chrome. В завершение Вы можете использовать данный пример для того, чтобы создавать собственные вариации. А процесс оформления облегчается за счет предоставленного PSD-файла. Смотреть демо | Скачать архивом Внимание! У вас нет прав для просмотра скрытого текста.
Вернуться назад |