/* Параметры элемента ввода */
input
{
border: solid 1px #ccc;
color:#777;
width: 200px;
}
input:focus
{
color:#222;
}
/* Параметры контейнеров и индикаторов */
.pc-container
{
display: none;
}
.pc-indicator
{
padding: 1px;
margin: 5px 0px 0px 0px;
border: solid 1px #ddd;
font-size:0px;
}
.pc-indicator-text
{
padding: 0px;
font-size: 10px;
color: #aaa000;
}
.pc-indicator-inline
{
padding: 2px;
background-color: #c00;
width:25%;
}
/* Состояния текстового индикатора */
.pc-critical
{
color: #700;
}
.pc-yellow
{
color: #aaa000;
}
.pc-green
{
color: green;
}
/* Состояния визуального индикатора */
.pc-i-critical
{
background-color: #c00;
}
.pc-i-yellow
{
background-color: #ccc444;
}
.pc-i-green
{
background-color: green;
}
<div style="padding: 10px; padding-left: 15px;">
Введите свой пароль, чтобы проверить его сложность.
</div>
<div style="padding: 10px; padding-left: 15px; width: 200px;">
<input type="password" id="PASSWORD" />
<div id="PASSWORD_COMPLEX"> </div>
</div>
/*
Функция для проверки сложности пароля
На вводе получает идентификатор текстового поля и идентификатор контейнера для информации.
Помимо этого, можно задать функцию минимум и максимум для длины пароля. На основе этой информации будет
высчитан порог сложности. Этот аргумент - массив из двух элементов.
*/
function PasswordComplexity(passwordboxid, containerdivid, minmax, showtext)
{
//Главные элементы
var passwordbox = document.getElementById(passwordboxid);
var container = document.getElementById(containerdivid);
//Вновь созданные элементы
var indicator = document.createElement("div");
var indicator_i = document.createElement("div");
var text_ind = document.createElement("div");
//Устанавливаем параметры индикатора
container.appendChild(indicator);
indicator.className = "pc-indicator";
indicator.style.width = passwordbox.clientWidth - 30;
//Устанавливаем параметры внутреннего индикатора
indicator.appendChild(indicator_i);
indicator_i.className = "pc-indicator-inline";
//Устанавливаем параметры текстого индикатора
if (showtext == null && showtext != false)
container.appendChild(text_ind);
text_ind.className = "pc-indicator-text";
text_ind.innerHTML = "Низкая сложность";
//Устанавливаем параметры контейнера
container.className = "pc-container";
//Проверяем вводные данные
if (minmax == null)
minmax = Array(0, 25);
//Вычисляем данные сложности
var current_complexity = 0;
//Значения для определения сложности
var numeric = "0123456789";
var lower = "abcdefghijklmopqrstuvwxyzабвгдеёжзийклмнопрстуфхцчшщъыьэюя";
var upper = "ABCDEFGHIJKLMOPQRSTUVWXYZАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ";
var signs = "~`!@#$%^&*+-=_|\\/()[]{}<>,.;:?\"\'";
//Факторы сложности
var has_only_numeric = false;
var has_numeric = false;
var has_lower = false;
var has_upper = false;
var has_signs = false;
//Устанавливаем обработчик
passwordbox.onkeyup = function()
{
//Если что-нибудь введено
if (passwordbox.value.length != 0)
{
//Показываем индикатор
container.style.display = "block";
}
else
{
//В противном случае, скрываем
container.style.display = "none";
}
//Вычисляем комплексность
current_complexity = (passwordbox.value.length / minmax[1]).toString().substr(0,4);
//Проверяем наличие определенной группы символов
for(i = 0; i < passwordbox.value.length; i++)
{
has_numeric |= numeric.indexOf(passwordbox.value.charAt(i)) >= 0;
has_lower |= lower.indexOf(passwordbox.value.charAt(i)) >= 0;
has_upper |= upper.indexOf(passwordbox.value.charAt(i)) >= 0;
has_signs |= signs.indexOf(passwordbox.value.charAt(i)) >= 0;
if (has_numeric)
has_only_numeric++;
}
//Вычисляем самое частое состояние - пароль состоит из одних лишь цифр
if (has_only_numeric == passwordbox.value.length && has_lower == false && has_upper == false && has_signs == false)
{
current_complexity = 0.40;
text_ind.innerHTML = "<span style=\"critical\">Лёгкий пароль</span>";
indicator_i.style.width = "25%";
indicator_i.className = "pc-indicator-inline pc-i-critical";
has_only_numeric = 0;
has_numeric = false;
has_lower= false;
has_upper = false;
has_signs = false;
return;
}
//Сбрасываем
has_only_numeric = 0;
//Изменяем комплексность в соответствии с паролем
if (has_lower == true || has_upper == true)
{
current_complexity = parseFloat(current_complexity) + 0.10;
}
if (has_lower == true && has_upper == true)
{
current_complexity = parseFloat(current_complexity) + 0.15;
}
if (has_signs == true)
{
current_complexity = parseFloat(current_complexity) + 0.15;
}
//Сбрасываем
has_numeric = false;
has_lower= false;
has_upper = false;
has_signs = false;
//Если комплексность достаточна, то пароль оптимален
if (current_complexity >= 1)
{
text_ind.innerHTML = "<span class=\"pc-green\">Оптимальный</span>";
indicator_i.style.width = "97%";
indicator_i.className = "pc-indicator-inline pc-i-green";
return;
}
//Если длина введенного пароля меньше порога
if (passwordbox.value.length < minmax[0])
{
//Выводим критическое сообщение
text_ind.innerHTML = "<span class=\"pc-critical\">Слишком короткий</span>";
indicator_i.style.width = "25%";
indicator_i.className = "pc-indicator-inline pc-i-critical";
return;
}
//Если длина пароля больше порога
if (passwordbox.value.length > minmax[1])
{
text_ind.innerHTML = "<span class=\"pc-green\">Оптимальный</span>";
indicator_i.style.width = "97%";
indicator_i.className = "pc-indicator-inline pc-i-green";
return;
}
//Выводим состояние в индикаторе
indicator_i.style.width = (current_complexity * 100) + "px";
indicator_i.className = "pc-indicator-inline pc-i-yellow";
//Выводим состояние в текстовый элемент
text_ind.innerHTML = "<span style=\"pc-yellow\">Средней сложности</span>";
}
}
//Пример использования
PasswordComplexity("PASSWORD","PASSWORD_COMPLEX", Array(5,25));