Создаем красивый измеритель надежности пароля

12-10-22 root Css CSS, HTML, jQuery 0

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

HTML

Начнем с html5 документа, который будет содержать нашу регистрационную форму. Форма будет только демонстрировать наш индикатор, если вы хотите настоящую регистрацию, необходимо будет написать соответствующую серверную часть. index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>How to Make a Beautiful Password Strength Indicator</title>

        <!-- The stylesheet -->
        <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>Sign up, it's FREE!</h1>

        	<form class="" method="post" action="">

        		<div>
	    			<input type="text" id="email" name="email" placeholder="Email" />
        		</div>

        		<div>
        			<input type="password" id="password1" name="password1" placeholder="Password" />
        		</div>

        		<div>
        			<input type="password" id="password2" name="password2" placeholder="Password (repeat)" disabled="true" />
        		</div>

        		<!-- стрелка -->
        		<div></div>
        		<div></div>

        		<p>Password Meter</p>

        		<input type="submit" value="Register" />

        	</form>
        </div>

		<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 plugin прямо перед закрытием тега body для лучшей производительности.

jQuery

Следующий jQuery код довольно прост. Мы свяжем некоторые события с элементами формы и будем проверять вводимую информацию. Если обнаружится ошибка, то добавим класс «error» элементу .row, которй содержит input. Таким образом отобразим красный крест. В случае успеха отобразим зеленую галку. Перед отправкой формы проверим правильность введенных паролей.

$(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("Thank you for trying out this demo!");
			e.preventDefault(); // Remove this to allow actual submission

		}
		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');
		}

	});

	/* The Complexify code will go here */

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

		// проверка равенства
		if(pass2.val() == pass1.val()){

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

});

Теперь перейдем к нашему плагину, он будет проверять пароль. Плагин принимает callback-функцию, которая имеет 2 параметра: процентное значение 0-100 в зависимости от сложности пароля и значение valid — минимальная длина.

Изменяя значение strengthScaleFactor вы можете регулировать сложность используемого пароля. По-умолчанию оно равно 1, это означает, что пароль должен содержать заглавные, прописные буквы, цифры и специальные символы. Мы сделаем его равным 0.7.

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
	});
});

Если пароль прошел проверку, будет активировано второе поле (изначально оно заблокировано). Так же во время введения пароля мы будем вращать стрелку, мы получим плавную анимация благодаря свойству transition. Стрелка будет вращаться от -134 градусов до 134.

CSS

Рассмотрим только часть кода 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;
}

На этом всё!