根据密码强度使用JS自定义Bulma进度条

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

<div class="progress">
  <div id="progress-bar" class="progress-bar"></div>
</div>

// 获取密码输入框元素
const passwordInput = document.getElementById('password');

// 获取进度条元素
const progressBar = document.getElementById('progress-bar');

// 监听密码输入框的输入事件
passwordInput.addEventListener('input', function() {
  // 获取密码强度
  const strength = calculatePasswordStrength(passwordInput.value);

  // 根据密码强度设置进度条的宽度和颜色
  if (strength === 'weak') {
    progressBar.style.width = '33%';
    progressBar.classList.add('is-danger');
    progressBar.classList.remove('is-warning');
    progressBar.classList.remove('is-success');
  } else if (strength === 'medium') {
    progressBar.style.width = '66%';
    progressBar.classList.add('is-warning');
    progressBar.classList.remove('is-danger');
    progressBar.classList.remove('is-success');
  } else if (strength === 'strong') {
    progressBar.style.width = '100%';
    progressBar.classList.add('is-success');
    progressBar.classList.remove('is-danger');
    progressBar.classList.remove('is-warning');
  } else {
    progressBar.style.width = '0%';
    progressBar.classList.remove('is-danger');
    progressBar.classList.remove('is-warning');
    progressBar.classList.remove('is-success');
  }
});

// 计算密码强度的函数
function calculatePasswordStrength(password) {
  // 根据密码的复杂度规则进行计算，这里只是一个示例
  if (password.length < 6) {
    return 'weak';
  } else if (password.length < 10) {
    return 'medium';
  } else {
    return 'strong';
  }
}

<script src="path/to/your/javascript.js"></script>