CheckPass - проверка надёжности пароля на jQuery

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

Теория

По моему мнению, надёжным является пароль, который содержит:

1. Английские буквы в нижнем и верхнем регистре, цифры
2. Разнообразные символы (сравните aaaBBB111 и Gh8Er2b4S)
3. Такие символы, как @, #, $, %, ^, &, * и прочие
4. Определённую роль играет и длина пароля – длинный пароль сложнее взломать

И напротив, нельзя назвать надёжным пароль, который:

1. Состоит только из цифр
2. Содержит в себе менее чем 6 знаков
3. Состоит из одного слова, которое можно подобрать по словарю
4. Состоит из символов, идущих на клавиатуре друг за другом (например, qwerty или 123456)

Теперь плавно перейдём к практике.
Попробуйте ввести что-нибудь в следующие поля.

Вариант по умолчанию

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

Изменение максимальной оценки

Новые цвета и увеличение количества промежуточных уровней

Только текстовая оценка

Ещё один эксперимент с цветом и скоростью анимации

Плагин изнутри

Рассмотрим код:

$.fn.checkPass = function(o){
	var o = $.extend({
	    max:15, // максимальная оценка
	    statusHTML:'<div><div class="password_status"></div><div class="password_rate"></div></div>', // html код надёжности пароля
	    animateColor:false, // делать плавный переход от цвета к цвету или нет
	    animateSpeed:'fast', // скорость анимации
		levels:[
				{max:4,color:'#FF8D84'},  // цвета и максимальные оценки
				{max:7,color:'#FEE972'},  // при которых
				{max:15,color:'#9DE92C'}  // работает данный цвет
			]}
		, o);
	return $(this).each(function(){
		var f = $(this);
		f.after(o.statusHTML); // добавляем html код
		var lineParent = f.next().children('.password_status');  // находим родительский элемент будущей линии
		lineParent.append('<div class="password_line"></div>'); // добавляем линию
		var line = lineParent.children('.password_line'); // назначаем ей переменную
		line.height(lineParent.height()).width(0); // и формируем размер
		var rateParent = f.next().children('.password_rate'); // находим элемент, в который будет вставляться оценка
		f.keyup(function(){ // при нажатии клавиши
			var text = f.val(), // получаем текст
			diff = [], // очищаем массив с символами
			types = {lowLetter:-0.5,upLetter:-0.2,number:0,symbol:-0.5}, // очищаем массив с счётчиком символов
			rate = countDiff = 0; // обнуляем переменные
			for (var i = 0;i < text.length;i++) { // проходим циклом по паролю
				var letter = text[i];
				if (!diff[letter]) { // если этот символ ещё не встречался
					diff[letter] = true; // добавляем его в массив
					if (/[0-9]/.test(letter)) { // если символ - цифра
						countDiff += 0.2; // увеличиваем счётчик
					} else { // иначе
						countDiff += 0.5; // увеличиваем счётчик на большее количество
					}
				}
				if (/[a-z]/.test(letter)) types.lowLetter ++; // подсчитываем количество английских букв
				if (/[A-Z]/.test(letter)) types.upLetter ++; // букв в верхнем регистре
				if (/[0-9]/.test(letter)) types.number ++; // чисел
				if (/[\W_]/.test(letter)) types.symbol ++; // и прочих символов
			}
			rate += (types.lowLetter + types.upLetter + types.number / 2 + types.symbol * 2) / text.length + countDiff + text.length / 10; // суммируем всё воедино
			if (countDiff <= 1) rate = 1; // если в пароле испольуется только один символ любое количество раз - оценка пароля будет равна 1
			if (text == '') rate = 0; // пустое поле для ввода пароля - оценка пароля равна 0
			if (rate > o.max) rate = o.max; // оценка не может быть больше максимально возможной
			rate = Math.round(rate); // округляем оценку
			for (i in o.levels) { // перебираем возможные цвета оценок
				var level = o.levels[i];
				if (rate <= level.max) {  // если оценка меньше максимальной оценки уровня
					var w = parseInt(lineParent.width() * rate / o.max) + 'px'; // длина линии
					if (o.animateColor) { // если переход от цвета к цвету анимирован
						line.animate({backgroundColor:level.color, width:w}, o.animateSpeed); // анимируем
					} else {
						line.animate({width:w}, o.animateSpeed, function(){ // анимируем
							$(this).css({backgroundColor:level.color}); // а затем меняем цвет
						});
					}
					break;
 				}
			}
			rateParent.html(rate + ' / ' + o.max); // вставляем текстовую информацию о надёжности пароля
		});
		f.keyup(); // запускаем функцию на случай, если в форму изначально введены данные
          });
}

CSS

.password_status {/* для этого элемента обязательно нужно обьявить */ 
        width:300px; /* ширину */
    	height:5px; /* и высоту */
}

Параметры

max (по умолчанию 15) - максимальная оценка. Если оценка кажется вам завышенной, то с помощью этого параметра вы можете легко это исправить.

statusHTML – html-код, используемый для вывода оценки. Позволяет менять расположение элементов или убирать ненужные. Нужно помнить, что div’ы с классами password_status и password_rate должны быть упакованы в родительский элемент – иначе плагин их не увидит.

animateColor (по умолчанию false) – переменная, определяющая, делать плавный переход от цвета к цвету или нет.
Для плавного перехода необходим плагин query.color.js.

animateSpeed - (по умолчанию fast) скорость анимации. Может принимать либо значения в миллисекундах, либо следующие значения: fast, normal или slow.

levels – массив с цветами и максимальными оценками, при которых работает цвет. По умолчанию содержит 3 уровня оценки, но может содержать и большее количество.

Поддержка браузерами

Плагин работает во всех современных браузерах, исключая (по неизвестной причине) IE 6 и IE 7. Все вопросы по работе плагина задавайте в комментариях, я обязательно постараюсь ответить.

---

Категории

• CMS
• CSS
• jQuery
• MySQL
• PHP
• Вёрстка

Контакты