jQuery密码强度检查器代码优化 寻求更简洁实现方案

原代码存在的可优化问题 #

• 类名管理漏洞多：手动在每个switch分支里增减类名，不仅重复代码多，还存在明显遗漏——比如强度值为3（对应进度60）的分支完全没处理类名切换，会残留前序等级的类名；清空密码回到强度0的分支也没清除已添加的绿/黄类，最终导致颜色和实际强度不匹配的bug
• 逻辑冗余：特殊字符校验拆成两个独立正则、字母数字判断的规则过严（要求至少两个连续字母数字）、长度判断规则重叠，没必要写多个分支做重复校验
• 写法不统一：同一功能里混用原生DOM操作和jQuery方法，没有统一风格
• CSS存在语法错误：原progress.strength::-webkit-progress-value规则中的background;没有赋值，会导致WebKit内核浏览器下的样式加载异常

精简实现思路 #

• 用配置表维护所有强度等级对应的进度值、样式类，消除硬编码的switch分支
• 统一类名切换逻辑：每次更新进度条前，批量清除所有强度相关的类名，再添加当前等级对应的类，从根源上避免漏删类的问题
• 合并重复的正则判断，简化校验逻辑，去掉无意义的规则重叠
• 统一用jQuery处理DOM操作，减少冗余代码
• 给进度条加过渡动画，让颜色和进度变化更自然

优化后可直接运行的代码 #

<h1>密码强度检查</h1>
<label>输入密码</label>
<input style="width: 200px" type="password" autocomplete="none" id="password">
<progress id="strength" class="strength" value="0" max="100"></progress>

// 强度配置表，后续调整规则直接修改此处即可
const strengthConfig = [
  { level: 0, progress: 0, className: '' },
  { level: 1, progress: 20, className: 'red' },
  { level: 2, progress: 40, className: 'orange' },
  { level: 3, progress: 60, className: 'yellow' },
  { level: 4, progress: 80, className: 'light-green' },
  { level: 5, progress: 100, className: 'green' }
];
// 提取所有强度类名，用于批量清除
const allStrengthClasses = strengthConfig.map(item => item.className).filter(Boolean).join(' ');

// 绑定输入事件，同时支持键盘输入和粘贴触发
$('#password').on('keyup input', function() {
  checkPassword($(this).val());
});

function checkPassword(password) {
  let strength = 0;
  // 简化校验规则：
  // 同时包含字母+数字，加1分
  if (/[a-zA-Z]/.test(password) && /\d/.test(password)) strength += 1;
  // 包含任意特殊字符，加1分
  if (/[!@£$%^&*()~<>?]/.test(password)) strength += 1;
  // 长度大于6位，加1分
  if (password.length > 6) strength += 1;
  // 长度大于10位，加1分
  if (password.length > 10) strength += 1;
  // 防止计算出的强度超过配置的最大等级
  strength = Math.min(strength, strengthConfig.length - 1);

  // 批量更新进度条：清旧类、加新类、设进度值
  const current = strengthConfig[strength];
  $('#strength')
    .removeClass(allStrengthClasses)
    .addClass(current.className)
    .val(current.progress);
}

progress.strength {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
}
progress.strength::-webkit-progress-value {
  /* 给进度条变化加平滑过渡 */
  transition: all 0.3s ease;
}
progress.red::-webkit-progress-value {
  background: red;
}
progress.orange::-webkit-progress-value {
  background: rgb(255, 153, 0);
}
progress.yellow::-webkit-progress-value {
  background: rgb(229, 255, 0);
}
progress.light-green::-webkit-progress-value {
  background: rgb(150, 230, 50);
}
progress.green::-webkit-progress-value {
  background: rgb(53, 252, 13);
}

内容的提问来源于stack exchange，提问作者Evan esco