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

[kick]

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

<form name="my_form" method="post" action="#" onsubmit="return checkPassword(this);">
<p>
Пароль: <input type="password" name="password" />
</p>
<p>
<input type="submit" name="check" value="Отправить" />
</p>
</form>
И теперь код функции checkPassword():
Код:
<script type="text/javascript">
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 < password.length; i+:-) {
/* Проверяем каждый символ пароля на принадлежность к тому или иному типу */
if (!is_s && s_letters.indexOf(password) != -1) is_s = true;
else if (!is_b && b_letters.indexOf(password) != -1) is_b = true;
else if (!is_d && digits.indexOf(password) != -1) is_d = true;
else if (!is_sp && specials.indexOf(password) != -1) is_sp = true;
}
var rating = 0;
var text = "";
if (is_s) rating++; // Если в пароле есть символы в нижнем регистре, то увеличиваем рейтинг сложности
if (is_b) rating++; // Если в пароле есть символы в верхнем регистре, то увеличиваем рейтинг сложности
if (is_d) rating++; // Если в пароле есть цифры, то увеличиваем рейтинг сложности
if (is_sp) rating++; // Если в пароле есть спецсимволы, то увеличиваем рейтинг сложности
/* Далее идёт анализ длины пароля и полученного рейтинга, и на основании этого готовится текстовое описание сложности пароля */
if (password.length < 6 && rating < 3) text = "Простой";
else if (password.length < 6 && rating >= 3) text = "Средний";
else if (password.length >= 8 && rating < 3) text = "Средний";
else if (password.length >= 8 && rating >= 3) text = "Сложный";
else if (password.length >= 6 && rating == 1) text = "Простой";
else if (password.length >= 6 && rating > 1 && rating < 4) text = "Средний";
else if (password.length >= 6 && rating == 4) text = "Сложный";
alert(text); // Выводим итоговую сложность пароля
return false; // Форму не отправляем
}
</script>

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

 

[Logan22]

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

 

[Influence]

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

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

 

[Enmity]

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

пофиксил

 

[Mizuwokiru]

Как вариант:

    <form action="">
        <label for="password-box">Пароль: </label>
        <input type="password" id="password-box" oninput="checkDifficulty()">
        <strong id="password-difficulty"></strong>
    </form>
    <script type="text/javascript">
        // Элементы, с которыми работаем
        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 < 6) {
                showMessage(Messages.IS_TOO_SHORT, Colors.ERROR);
                return;
            }
            if (password.search(invalidPattern) >= 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;
        }
    </script>

 

[Warak]

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

вариант куда солиднее - советую.