Автор

27 04.2013
Анимированная проверка сложности пароля

Анимированная проверка сложности пароля


 

Все пользователи хотят, чтобы из персональные данные были в безопасности, но что сделать, если сам пользователь, сознательно, при регистрации указывает легкий пароль, который легко подобрать, или он состоит из нескольких символов. Для безопасности сайта и данных пользователя это серьезное упущение, в данном случае необходимо предупредить посетителя о надежности пароля, и сделать это можно с помощью анимированной проверки сложности пароля при вводе пароля. В данном уроке мы рассмотрим как сделать именно такой индикатор.

 

ДЕМО
ИСХОДНИКИ

 

Определять уровень сложности пароля будет производится плагином jQuery Complexify и выводится в наглядном виде. Отправка данных формы регистрации возможно только тогда, когда достигнут заданный уровень сложности пароля.

Шаг 1. HTML

Для начала мы сделаем стандартный документ HTML5, который содержит форму регистрации. Форма используется только в качестве примера для использования индикатора сложности - реальная ситуация потребует реализации серверной части кода.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Анимированная проверка сложности пароля с помощью jQuery  | Демонстрация для сайта s-sd.ru</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">            
            <br><center><a href="http://www.s-sd.ru"><img src="/files/logo.png" alt=""/></a></center>            
              <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>                
                <!-- Стрелка индикатор -->
                <div class="arrowCap"></div>
                <div class="arrow"></div>                
                <p class="meterText">Сложность пароля</p>                
                <input type="submit" value="Регистрация" />                
            </form>
        </div>        
        <!-- Включения 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>

Как вы заметили, разметка является достаточно простой, приступим к следующему шагу урока.

Шаг 2. 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;
}

#main form .meterText{
	color: #575757;
	font-size: 10px;
	left: 189px;
	line-height: 1.1;
	position: absolute;
	top: 485px;
	width: 60px;
}

Шаг 3. jQuery

Последним шагом будет рассмотрения кода jQuery, который достаточно простой. Мы привязываем несколько событий к элементам формы и выполняем проверку введенных значений. Если произошла ошибка, то к элементу .row добавляется класс “error”. в результате выводится красный крест. Класс “success” выводит зеленую метку успешной проверки.

$(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();

		}
	});

	// Проверка адреса e-mail
	email.on('blur',function(){

		// очень простая процедура проверки
		if (!/^\S+@\S+\.\S+$/.test(email.val())){
			email.parent().addClass('error').removeClass('success');
		}
		else{
			email.parent().removeClass('error').addClass('success');
		}

	});

	// Проверяем второе поле ввода пароля
	pass2.on('keydown input',function(){

		// Нужно убедиться, что эначения первого и второго полей ввода пароля одинаковы
		if(pass2.val() == pass1.val()){

			pass2.parent()
					.removeClass('error')
					.addClass('success');
		}
		else{
			pass2.parent()
					.removeClass('success')
					.addClass('error');
		}
	});

});

Плагин Complexify получает возвратную функцию с двумя аргументами - сложностью пароля в процентах и флаг valid, который устанавливается в зависимости от нескольких условий, в том числе и от длины пароля, минимальное допустимое значение которой определяется свойством minimumChars.

// Используем плагин 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
	});
});

Значение свойства strengthScaleFactor определяет минимально допустимый уровень сложности пароля. По умолчанию используется значение 1, которое требует наличия в пароле символов в верхнем и нижнем регистре, чисел и специальных символов. Но вполне достаточным уровнем будет  0.7.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

02 04.2013
Анимированная проверка сложности пароля

Не часто но все же приходиться создавать сайты с наложениям страниц, а именно вывода другой страницы в модальном окне, это достаточно практичный ход, ведь позволяет удержать посетителя на сайте, не перекидывая его на другую страничку. Вывести так страницы могут и простые фреймы, но они достаточно просто выглядят. Но если вам необходимо скрасить данные окна. Тогда вам придет на помощь небольшой плагин jquery, который благодаря своей гибкости, позволит реализовать ваши пожелания в данном направлении.


26 04.2013
Анимированная проверка сложности пароля

С каждым днем ресурсы становятся более мощными, при этом возрастают возможности и сайтостроения. Сайты становятся более массивными, требующие многих затрат ресурсов. В данном уроке мы рассмотрим необычным подход к созданию фона для сайта, а именно замена его и воспроизведение видео в качестве заставки. Все выглядит достаточно эффектно, при этом требует не так уж много ресурсов как казалось бы на первый взгляд. Осуществить данную задумку нам поможет небольшой плагин jquery.


10 07.2013
Анимированная проверка сложности пароля

Галереи, как много мы уже о них писали и приводили различные примеры и конструкции. Но, как говорят, прогресс не стоит на месте, и с каждой минутой все улучшается и становиться лучше, это относиться и к галереям. В данном уроке мы рассмотрим как создать замечательную галерею миниатюр, при нажатии на которую происходит плавная анимация, и изображение раскрывается в определенную величину, казалось все примитивно, и мы такое не раз уже видели, но не так все просто, идея заключается в красивом появлении изображения, в этом и есть вся фишка данного лайтбокса.


26 03.2013
Анимированная проверка сложности пароля

Неприятно, когда ты тратишь несколько часов на то, чтобы написать какую статью, размещаешь ее на своем сайте, а потом она оказывается еще на нескольких ресурсах без указания ссылки на первоисточник. Эти методы не дают стопроцентной гарантии, однако снизить количество подобных случаем помогают. Существуют и другие эффективные средства – защита от копирования текста средствами JavaScript. Использование скриптов помогает затруднить работу копипастерам, заставив их тратить больше времени на копирование контента.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close