根据密码强度使用 JS 自定义布尔玛进度条答案

【问题标题】：Customize Bulma Progress Bar with JS depending on password strength根据密码强度使用 JS 自定义布尔玛进度条
【发布时间】：2020-04-19 14:32:08
【问题描述】：

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

或者这是一种完全错误的思维方式？它基本上可以作为普通的密码强度计工作，也可以将颜色从红色变为绿色。谢谢！

【问题讨论】：

标签： javascript progress-bar bulma

【解决方案1】：

我想出了如何用 JQuery 做到这一点。首先，我需要一个值数组。

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

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

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

【讨论】：