Индикатор сложности пароля на чистом JavaScript

В данной записи я вам покажу как сделать индикатор сложности пароля на чистом JavaScript. Данный индикатор будет менять свой цвет и длину заливки. Вы самостоятельно можете прописать параметры по которым будет выбираться сложность пароля.

Протестируйте моё творение…

Суть такова…мы будем забирать из поля введенные данные и проверять количество символов, присутствие букв, символов и цифр. В зависимости от результата будет изменяться длина индикатора и он будет окрашиваться в определенный цвет.

HTML

Для начала давайте добавим основные элементы. Нам нужно 2 элемента: поле и блок под индикатор.

<div class="block_for_input">
     <!--ПОЛЕ-->
     <input type="text" id="input_test">
     <!--БЛОК ДЛЯ ИНДИКАТОРА-->
     <div id="block_check"></div>
</div>

CSS

Здесь я задал длину блока в котором находится индикатор и поле. Индикатору я задал высоту, отступ и плавность изменения.

.block_for_input {
    width: 200px;
}
.block_for_input input {
    width: 100%;
}
#block_check {
    height: 5px;
    margin-top: 5px;
    transition: 1s;
}

JavaScript

Здесь весь код помечен, но давайте все ровно пробежимся по основным моментам.

1. Прописываем переменные внутри которых будут храниться все специальные символы, цифры, буквы в верхнем и нижнем регистре.
2. Получаем и записываем в переменные само поле для ввода, данные из поля и индикатор.
3. С помощью метода addEventListener проверяем ввод данных в поле.
4. Далее создаем переменные которые будут иметь boolean значения. Эти переменные будут проверять есть ли определенные символы.
5. Далее вы определяем рейтинг от которого будет зависеть сложность пароля.
6. И в самом конце прописываем условия на котором будет выстраиваться сложность пароля.

var s_letters = "qwertyuiopasdfghjklzxcvbnm"; // Буквы в нижнем регистре
var b_letters = "QWERTYUIOPLKJHGFDSAZXCVBNM"; // Буквы в верхнем регистре
var digits = "0123456789"; // Цифры
var specials = "!@#$%^&*()_-+=\|/.,:;[]{}"; // Спецсимволы
           
var input_test = document.getElementById('input_test');//получаем поле
var block_check = document.getElementById('block_check');//получаем блок с индикатором
       
input_test.addEventListener('keyup', function(evt){
var input_test_val = input_test.value;//получаем значение из поля
        
var is_s = false; // Есть ли в пароле буквы в нижнем регистре
var is_b = false; // Есть ли в пароле буквы в верхнем регистре
var is_d = false; // Есть ли в пароле цифры
var is_sp = false; // Есть ли в пароле спецсимволы
        
for (var i = 0; i < input_test_val.length; i++) {
    /* Проверяем каждый символ пароля на принадлежность к тому или иному типу */
    if (!is_s && s_letters.indexOf(input_test_val[i]) != -1) {
         is_s = true
    }
    else if (!is_b && b_letters.indexOf(input_test_val[i]) != -1) {
          is_b = true
    }
    else if (!is_d && digits.indexOf(input_test_val[i]) != -1) {
           is_d = true
    }
    else if (!is_sp && specials.indexOf(input_test_val[i]) != -1) {
           is_sp = true
    }
}

var rating = 0;
if (is_s) rating++; // Если в пароле есть символы в нижнем регистре, то увеличиваем рейтинг сложности
if (is_b) rating++; // Если в пароле есть символы в верхнем регистре, то увеличиваем рейтинг сложности
if (is_d) rating++; // Если в пароле есть цифры, то увеличиваем рейтинг сложности
if (is_sp) rating++; // Если в пароле есть спецсимволы, то увеличиваем рейтинг сложности
/* Далее идёт анализ длины пароля и полученного рейтинга, и на основании этого готовится текстовое описание сложности пароля */
if (input_test_val.length < 6 && rating < 3) {
    block_check.style.width = "10%";
    block_check.style.backgroundColor = '#e7140d';
}
else if (input_test_val.length < 6 && rating >= 3) {
    block_check.style.width = "50%";
    block_check.style.backgroundColor = '#ffdb00';
}
else if (input_test_val.length >= 8 && rating < 3) {
    block_check.style.width = "50%";
    block_check.style.backgroundColor = '#ffdb00';
}
else if (input_test_val.length >= 8 && rating >= 3) {
    block_check.style.width = "100%";
    block_check.style.backgroundColor = '#61ac27';
}
else if (input_test_val.length >= 6 && rating == 1) {
    block_check.style.width = "10%";
    block_check.style.backgroundColor = '#e7140d';
}
else if (input_test_val.length >= 6 && rating > 1 && rating < 4) {
    block_check.style.width = "50%";
    block_check.style.backgroundColor = '#ffdb00';
}
else if (input_test_val.length >= 6 && rating == 4) {
    block_check.style.width = "100%";
    block_check.style.backgroundColor = '#61ac27';
};
});