根据密码强度用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')};

然后只是使用所有值以及if语句。