Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс "Практика HTML5 и CSS3"

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный тренинг "PHP для Создания Сайтов: Введение"

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Записаться бесплатно->

Бесплатный курс "Сайт-Визитка За 15 уроков"

Создайте свой сайт за 3 часа и 30 минут.

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

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Получить в подарок->

Бесплатный курс "Основы HTML и CSS"

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Получить в подарок->

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

Бесплатный курс "Основы работы с JavaScript"

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

Получить в подарок->

Воспламенитель Кода: Сайт-Визитка на CodeIgniter

Курс предназначен для тех, кто знает основы HTML и CSS.

Изучив его, Вы сможете разрабатывать гибкие и функциональные Сайты-Визитки с панелью администратора.

Все, что нужно для разработки Сайта-Визитки: от шаблона и до переноса на хостинг.

Подробнее->

JavaScript и jQuery с нуля

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

Изучив его, Вы сможете создавать более красивые и функциональные сайты.

104 видеоурока: от основ JavaScript до готовых решений на jQuery.

Подробнее->

Повелитель PHP: кратчайший путь к мастерству без толстых учебников.

Курс предназначен для тех, кто хочет освоить язык PHP и свободно с ним работать.

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

Подробнее->

*Наведите курсор мыши для приостановки прокрутки.


Красивый измеритель силы пароля на 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 и другие веб-технологии:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!


Смотрите также:

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

CodeIgniter: жив или мертв?

CodeIgniter: жив или мертв?

Функции обратного вызова, анонимные функции и механизм замыканий

Функции обратного вызова, анонимные функции и механизм замыканий

Применение функции к каждому элементу массива

Применение функции к каждому элементу массива

Слияние массивов. Преобразование массива в строку

Слияние массивов. Преобразование массива в строку

Деструктор и копирование объектов с помощью метода __clone()

Деструктор и копирование объектов с помощью метода __clone()

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

PHP: Удаление элементов массива

PHP: Удаление элементов массива

Ключевое слово final (завершенные классы и методы в PHP)

Ключевое слово final (завершенные классы и методы в PHP)

50 классных сервисов, программ и сайтов для веб-разработчиков

50 классных сервисов, программ и сайтов для веб-разработчиков

Наверх