基于密码强度使用JS自定义Bulma进度条

Great question! Your core idea is totally on track—we just need to tweak a few parts of your code to tie zxcvbn's score to both the progress bar's value and its color using Bulma's built-in tools. Here's a step-by-step implementation:

First, Fix the DOM Selector #

Your original code uses getElementsByClassName('.progress')—the dot here is unnecessary (it’s for CSS selectors, not class names), and this method returns a collection of elements. Instead, use querySelector('.progress') to directly grab the single progress bar element cleanly.

Create a Clear Mapping for Scores #

We’ll map zxcvbn’s 0-4 score range to two things:

1. Progress bar values (0-100, matching Bulma’s max="100" default)
2. Bulma’s color classes, which naturally fit a "weak to strong" gradient: is-danger (red) → is-warning (yellow) → is-info (blue) → is-success (green)

Full Working Code #

HTML (with your Bulma progress bar)

<input type="password" id="pass" placeholder="Enter your password">
<progress class="progress" value="0" max="100">0%</progress>
<div id="password-strength-text"></div>

JavaScript

var zxcvbn = require('zxcvbn');

// Map zxcvbn scores to progress values and Bulma color classes
var strengthConfig = {
  0: { progress: 0, color: 'is-danger' },
  1: { progress: 25, color: 'is-warning' },
  2: { progress: 50, color: 'is-info' },
  3: { progress: 75, color: 'is-success' },
  4: { progress: 100, color: 'is-success' }
};

// Keep your original strength labels
var strengthLabels = { 
  0: "very weak", 
  1: "pretty weak", 
  2: "weak", 
  3: "strong", 
  4: "very strong" 
};

// Grab DOM elements
var passwordInput = document.getElementById('pass');
var progressBar = document.querySelector('.progress');
var strengthText = document.getElementById('password-strength-text');

// Add input event listener
passwordInput.addEventListener('input', function() {
  var password = passwordInput.value;
  var result = zxcvbn(password);

  if (password !== "") {
    // Update strength text
    strengthText.innerHTML = "Strength: " + strengthLabels[result.score];
    
    // Get the config for the current score
    var currentConfig = strengthConfig[result.score];
    
    // Update progress bar value
    progressBar.value = currentConfig.progress;
    
    // Reset color classes before applying the new one (prevents conflicts)
    progressBar.classList.remove('is-danger', 'is-warning', 'is-info', 'is-success');
    progressBar.classList.add(currentConfig.color);
  } else {
    // Reset everything when the input is empty
    strengthText.innerHTML = "";
    progressBar.value = 0;
    progressBar.classList.remove('is-danger', 'is-warning', 'is-info', 'is-success');
  }
});

Key Details Explained #

• Color Class Management: We remove all color classes before adding the new one to avoid overlapping styles (e.g., accidentally having both is-danger and is-success applied).
• Flexible Mapping: If you want to adjust the progress values or colors later, just update the strengthConfig object—no need to rewrite core logic.
• Empty Input Reset: The bar resets to its default state when the password field is cleared, which keeps the UI consistent.

If you wanted a truly smooth color gradient (instead of discrete Bulma classes), you could add custom CSS to override the progress bar’s background with a linear gradient, but using Bulma’s built-in classes keeps your code aligned with the framework’s design system and requires less custom styling.

内容的提问来源于stack exchange，提问作者Katharina Schreiber