根據密碼強度使用 JS 自定義布爾瑪進度條

Question

我正在嘗試使用“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) {... ??? ...}

或者這是一種完全錯誤的思維方式？ 它基本上可以作為普通的密碼強度計工作，也可以將顏色從紅色變為綠色。 謝謝！

Answer 1

我想出了如何用 JQuery 做到這一點。 首先，我需要一個值數組。

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

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

然后只需使用所有值和 else if 語句。