1. Этот сайт использует файлы cookie. Продолжая пользоваться данным сайтом, Вы соглашаетесь на использование нами Ваших файлов cookie. Узнать больше.
Скрыть объявление

Привет посетитель! У нас на форуме тебе откроются дополнительные разделы, которые скрыты от гостей! А так же ты найдёшь много полезной информации.

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

Тема в разделе "PHP / Python / JavaScript / Etc", создана пользователем kick, 9 фев 2018.

  1. kick

    kick Магистр Йода Администратор

    Регистрация:
    20 янв 2015
    Сообщения:
    4.917
    Симпатии:
    3.470
    Баллы:
    6.235
    На многих сайтах при регистрации есть проверка сложности пароля. Есть много различных вариантов проверки того, насколько пароль сложен, и один из вариантов проверки сложности пароля на 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.
     
    Последнее редактирование модератором: 10 фев 2018
  2. Logan22

    Logan22 Свой человек Проверенный

    Регистрация:
    21 янв 2015
    Сообщения:
    689
    Симпатии:
    388
    Баллы:
    496
    Не судьба разметку в теги CODE всунуть ?
    [JS] Проверка сложности пароля, 9 фев 2018, 07:10, Форум администраторов игровых серверов, 6561
     
    6yka нравится это.
  3. Influence

    Influence Бывалый Проверенный

    Регистрация:
    14 июн 2015
    Сообщения:
    860
    Симпатии:
    417
    Баллы:
    565
    кикусик скорее всего с телефона пишет, там наверно не очень удобно редактировать сам текст
     
    kick нравится это.
  4. Enmity

    Enmity jopacode.ru Администратор

    Регистрация:
    18 май 2015
    Сообщения:
    1.651
    Симпатии:
    1.366
    Баллы:
    1.179
    пофиксил
     
  5. Daan Raven

    Daan Raven Свой человек Проверенный

    Регистрация:
    7 апр 2015
    Сообщения:
    704
    Симпатии:
    322
    Баллы:
    469
    Как вариант:
    Код:
        <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>
    
     
    kick нравится это.
  6. Warak

    Warak Интересующийся Местный

    Регистрация:
    1 фев 2016
    Сообщения:
    105
    Симпатии:
    32
    Баллы:
    232
Похожие темы
  1. Dementor
    Ответов:
    8
    Просмотров:
    610
  2. OneTime
    Ответов:
    0
    Просмотров:
    179
  3. Bloomfield
    Ответов:
    0
    Просмотров:
    284
  4. Diaspora
    Ответов:
    1
    Просмотров:
    133
  5. Wortez
    Ответов:
    2
    Просмотров:
    184
Загрузка...