如何用JavaScript实现带数值评分的密码强度检测？代码无报错但无效果

需求回顾 #

需要验证密码是否符合以下标准并返回强度百分比，同时处理长度提示：

• 至少包含1个小写字母[a-z] → 贡献25%强度
• 至少包含1个大写字母[A-Z] → 贡献25%强度
• 至少包含1个数字[0-9] → 贡献25%强度
• 至少包含1个特殊字符[$@#&!] → 贡献25%强度
• 长度要求：最小6位（不符合需显示提示）、最大12位（不符合需显示提示）

现有代码 #

HTML代码 #

<body> 
  <form class="center-block"> 
    <input type="text" id="password" autocomplete="off" class="form-control input-lg"> 
    <progress max="100" value="0" id="meter"></progress> 
    <button class="btn btn-success btn-lg btn-block">Show Password Strength</button> 
  </form> 
  <div class="textbox text-center"> password </div> 
</body>

JavaScript代码 #

var code =document.getElementById("password"); 
var strengthbar= document.getElementById("meter"); 
code.addEventListener("keyup", function(){checkpassword(code.value) }) 
var display =document.getElementsByClassName("textbox")[0]; 
function checkpassword(password) { 
  var strength=0; 
  if (password.match(/[a-z]+/)){ 
    strength+=1; 
  } 
  if (password.match(/[A-Z]+/)){ 
    strength+=1; 
  } 
  if (password.match(/[0-9]+/)){ 
    strength+=1; 
  } 
  if (password.match(/[$@#&!]+/)){ 
    strength+=1; 
  } 
  if (password.length<6){ 
    display.innerHTML="minimum number of characters is 6": // 此处存在语法错误
  } 
  if (password.length>12){ 
    display.innerHTML="maximum number of characters is 12"; 
  } 
  switch(strength){ 
    case 0: strengthbar.value=0; break; 
    case 1: strengthbar.value=25; break; 
    case 2: strengthbar.value=50; break; 
    case 3: strengthbar.value=75; break; 
    case 4: strengthbar.value=100; break; 
  } 
}

问题排查与修复 #

我帮你梳理出几个导致代码无响应的关键问题，逐一修复后就能正常工作了：

1. 语法错误
在第一个长度判断语句末尾，你误用了冒号:代替分号;，这会直接导致JavaScript解析失败，整个脚本无法执行：

// 错误写法
display.innerHTML="minimum number of characters is 6": 
// 正确写法
display.innerHTML="minimum number of characters is 6"; 

2. 长度提示逻辑漏洞
当密码长度在6-12位的合法区间时，没有清空之前的提示信息，会导致提示一直停留在页面上。需要补充else分支处理合法情况：

if (password.length < 6) {
  display.innerHTML = "minimum number of characters is 6";
} else if (password.length > 12) {
  display.innerHTML = "maximum number of characters is 12";
} else {
  display.innerHTML = ""; // 长度合规时清空提示
}

3. 表单默认提交行为干扰
点击按钮时，表单会触发默认提交动作并刷新页面，导致进度条和提示信息被重置。需要阻止按钮的默认行为：

// 获取按钮元素并添加阻止默认行为的事件
const btn = document.querySelector('button');
btn.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止表单提交刷新页面
  checkpassword(code.value); // 手动触发密码强度检查
});

4. DOM加载顺序问题
如果你的JS代码放在<head>标签中执行，此时DOM还未完全加载，getElementById会获取到null，导致后续事件绑定失效。解决方法是把JS代码放在<body>末尾，或者用DOMContentLoaded包裹确保DOM加载完成后再执行脚本：

document.addEventListener('DOMContentLoaded', function() {
  // 所有JS逻辑放在这个回调内
  var code = document.getElementById("password"); 
  var strengthbar = document.getElementById("meter"); 
  var display = document.getElementsByClassName("textbox")[0]; 
  const btn = document.querySelector('button');

  code.addEventListener("keyup", function(){
    checkpassword(code.value);
  }); 

  btn.addEventListener('click', function(e) {
    e.preventDefault();
    checkpassword(code.value);
  });

  function checkpassword(password) { 
    // 原函数逻辑...
  }
});

修正后的完整JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
  var code = document.getElementById("password"); 
  var strengthbar = document.getElementById("meter"); 
  var display = document.getElementsByClassName("textbox")[0]; 
  const btn = document.querySelector('button');

  code.addEventListener("keyup", function(){
    checkpassword(code.value);
  }); 

  btn.addEventListener('click', function(e) {
    e.preventDefault();
    checkpassword(code.value);
  });

  function checkpassword(password) { 
    var strength = 0; 

    if (password.match(/[a-z]+/)){ 
      strength += 1; 
    } 
    if (password.match(/[A-Z]+/)){ 
      strength += 1; 
    } 
    if (password.match(/[0-9]+/)){ 
      strength += 1; 
    } 
    if (password.match(/[$@#&!]+/)){ 
      strength += 1; 
    } 

    // 处理长度提示
    if (password.length < 6) {
      display.innerHTML = "minimum number of characters is 6";
    } else if (password.length > 12) {
      display.innerHTML = "maximum number of characters is 12";
    } else {
      display.innerHTML = "";
    }

    // 更新进度条
    switch(strength){ 
      case 0: strengthbar.value = 0; break; 
      case 1: strengthbar.value = 25; break; 
      case 2: strengthbar.value = 50; break; 
      case 3: strengthbar.value = 75; break; 
      case 4: strengthbar.value = 100; break; 
    } 
  }
});

修改后，密码输入时会实时更新强度进度条，点击按钮也能触发检查，长度提示会正确显示和清空，功能就能正常运行了。

内容的提问来源于stack exchange，提问作者Emmanuel Dan