[JS] Проверка сложности пароля

[kick]

На многих сайтах при регистрации есть проверка сложности пароля. Есть много различных вариантов проверки того, насколько пароль сложен, и один из вариантов проверки сложности пароля на JavaScript я покажу в этой статье.

Для начала создадим простую HTML-форму:

Код:

Код:




Пароль:

И теперь код функции checkPassword():
Код:

function checkPassword(form) {
var password = form.password.value; // Получаем пароль из формы
var s_letters = "qwertyuiopasdfghjklzxcvbnm"; // Буквы в нижнем регистре
var b_letters = "QWERTYUIOPLKJHGFDSAZXCVBNM"; // Буквы в верхнем регистре
var digits = "0123456789"; // Цифры
var specials = "!@#$%^&*()_-+=\|/.,:;[]{}"; // Спецсимволы
var is_s = false; // Есть ли в пароле буквы в нижнем регистре
var is_b = false; // Есть ли в пароле буквы в верхнем регистре
var is_d = false; // Есть ли в пароле цифры
var is_sp = false; // Есть ли в пароле спецсимволы
for (var i = 0; i = 3) text = "Средний";
else if (password.length >= 8 && rating = 8 && rating >= 3) text = "Сложный";
else if (password.length >= 6 && rating == 1) text = "Простой";
else if (password.length >= 6 && rating > 1 && rating = 6 && rating == 4) text = "Сложный";
alert(text); // Выводим итоговую сложность пароля
return false; // Форму не отправляем
}



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

Безусловно, вариантов проверки сложности пароля на JavaScript очень много, и один из них Вы теперь знаете, как реализовать.

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

[Logan22]

Не судьба разметку в теги CODE всунуть ?

[Influence]

Не судьба разметку в теги CODE всунуть ?


кикусик скорее всего с телефона пишет, там наверно не очень удобно редактировать сам текст

[Enmity]

Не судьба разметку в теги CODE всунуть ?


пофиксил

[Mizuwokiru]

Как вариант:

Код:




Пароль:




// Элементы, с которыми работаем
var passwordBox = document.getElementById("password-box");
var passwordDifficultyLabel = document.getElementById("password-difficulty");

// Паттерны для поиска
var invalidPattern = /[^a-zA-Z0-9\!\@\#\$\%\^\&\*\(\)\_\-\+\=\\\|\/\.\,\:\;\[\]\{\}]/g;
var lowerCasePattern = /[a-z]/g;
var upperCasePattern = /[A-Z]/g;
var digitsPattern = /[0-9]/g;
var specialCharsPattern = /[\!\@\#\$\%\^\&\*\(\)\_\-\+\=\\\|\/\.\,\:\;\[\]\{\}]/g;

// Цвета вывода сообщения
var Colors = Object.freeze({
NONE: "#000000",
ERROR: "#DD5044",
EASY: "#FFCE44",
MEDIUM: "#4C8BF5",
HARD: "#18A15F"
});

// Варианты сообщений
var Messages = Object.freeze({
IS_TOO_SHORT: "Пароль слишком короткий!",
IS_TOO_EASY: "Пароль слишком простой!",
HAS_INVALID_CHARS: "Пароль содержит недопустимые символы!",
EASY: "Ненадежный пароль!",
MEDIUM: "Надежный пароль!",
HARD: "Очень надежный пароль!"
});

// Проверка сложности пароля
function checkDifficulty() {
var password = passwordBox.value;
if (password.length = 0) {
showMessage(Messages.HAS_INVALID_CHARS, Colors.ERROR);
return;
}

var difficulty = 0;
if (password.search(lowerCasePattern) >= 0)
difficulty++;
if (password.search(upperCasePattern) >= 0)
difficulty++;
if (password.search(digitsPattern) >= 0)
difficulty++;
if (password.search(specialCharsPattern) >= 0)
difficulty++;

switch (difficulty) {
case 1:
showMessage(Messages.IS_TOO_EASY, Colors.ERROR);
break;
case 2:
showMessage(Messages.EASY, Colors.EASY);
break;
case 3:
showMessage(Messages.MEDIUM, Colors.MEDIUM);
break;
case 4:
showMessage(Messages.HARD, Colors.HARD);
break;
}
}

// Показ сообщения
function showMessage(text, color) {
if (color === undefined)
color = Colors.NONE;
passwordDifficultyLabel.style.color = color;
passwordDifficultyLabel.innerText = text;
return true;
}

[Warak]

elboletaire/password-strength-meter (https://github.com/elboletaire/password-strength-meter) вариант куда солиднее - советую.