Настройте индикатор прогресса Bulma на JS в зависимости от надежности пароля - PullRequest
Новая
       26

Настройте индикатор прогресса Bulma на JS в зависимости от надежности пароля

0 голосов
/ 19 апреля 2020

Я пытаюсь проверить надежность пароля с помощью 'zxcvbn', и пока это работает только для текста: 

var zxcvbn = require('zxcvbn')
var strength = {
  0: "very weak",
  1: "pretty weak",
  2: "weak",
  3: "strong",
  4: "very strong"
}

var password = document.getElementById('pass');
var meter = document.getElementsByClassName('.progress');
var text = document.getElementById('password-strength-text');

password.addEventListener('input', function() {
  var val = password.value;
  var result = zxcvbn(val);

if (val !== "") {
    text.innerHTML = "Strength: " + strength[result.score]; 
  } else {
    text.innerHTML = "";
  }
});

Как вы уже догадались, я работаю с индикатором прогресса Bulma здесь: 

var meter = document.getElementsByClassName('.progress');

В основном эта строка имеет значения 

<progress class="progress" value="15" max="100">15%</progress>

Как получить доступ к тем, в зависимости от надежности пароля? Так что вот так: 

function updateProgressBar() {
  if (strength[result.score] = 0) {... ??? ...}

Или это совершенно неправильный способ мышления? Он показал себя в основном как обычный измеритель надежности пароля, также меняя цвет с красного на зеленый. Спасибо!

1 Ответ

0 голосов
/ 23 апреля 2020

Я выдумал, как это сделать с JQuery. Сначала мне нужен массив значений. 

var progressArr = [0, 10, 20, 40, 80, 100];

if (strength[result.score] == "weak" {
$('.progress').val(20).addClass('is-danger')};

Затем просто уменьшаем все значения и другие операторы if.

...