JavaScript 实现密码强度实时检测与安全条展示

作者:页面旅途

时间:2026-10-21

浏览:392

本文介绍如何利用 JavaScript 实现密码强度实时检测功能。通过监听输入框的 onKeyUp 和 onBlur 事件,获取用户输入的密码内容,并根据预设规则计算强度等级。代码演示了如何动态修改对应安全条单元格的背景颜色,从而在用户输入过程中直观展示密码强弱状态,提升网站注册或登录环节的用户体验与安全性。

文章目录

密码强度检测功能实现

在许多网站的用户注册或修改密码界面中,常能看到根据输入字符长度动态变化的安全等级条。这一交互功能主要依赖前端 JavaScript 实现。下面将展示具体的实现逻辑与代码细节。


//根据密码长度显示安全条
          <ul class="clear">
          <li>密  码:</li>
          <li> <input type="password" id="pwd" name="pwd" class="in" onKeyUp=pwStrength(this.value) onBlur=pw_y("pwd","pwd1")></li>
          <li><em class="red">*</em></li>
          <li class="i2 grey"><table border="0" bordercolor="#cccccc" style='display:marker'>
          <tr align="center">
            <td id="strength_L" bgcolor="#eeeeee">弱</td>
            <td id="strength_M" bgcolor="#eeeeee">中</td>
            <td id="strength_H" bgcolor="#eeeeee">强</td>
          <td align="left" >
           <label id="pwd1">使用数字,字母,下划线,长度在 6 - 20 个字符之间</label></td>
            </tr>
          </table>         
          </li>
          </ul>
function pwStrength(pwd){
  O_color="#eeeeee";
  L_color="#FF0000";
  M_color="#FF9900";
  H_color="#33CC00";
  if (pwd==null||pwd==''){
    Lcolor=Mcolor=Hcolor=O_color;
  }else{
    S_level=checkStrong(pwd);
    switch(S_level) {
      case 0:
        Lcolor=Mcolor=Hcolor=O_color;
      case 1:
        Lcolor=L_color;
        Mcolor=Hcolor=O_color;
        break;
      case 2:
        Lcolor=Mcolor=M_color;
        Hcolor=O_color;
        break;
      default:
        Lcolor=Mcolor=Hcolor=H_color;
      }
  }
  document.getElementById("strength_L").style.background=Lcolor;
  document.getElementById("strength_M").style.background=Mcolor;
  document.getElementById("strength_H").style.background=Hcolor;
  return;
}

上述内容介绍了利用 JavaScript 实现密码长度检测及安全条展示的核心方法。希望该示例能对开发者有所帮助。如有任何疑问,欢迎留言交流,我们将及时回复。感谢对本站的支持。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章