JavaScript动态检测密码强度并实时展示的实现方法

Leo

发布时间：2026-10-13 | 5人浏览过

原创

本文介绍如何使用JavaScript、正则表达式与DOM操作，在网页注册或修改密码时动态检测密码强度，并通过改变进度条的颜色与长度直观展示结果。

技术原理

在大多数网站的注册页面中，当用户输入密码时，系统会实时评估输入的字符组成（如是否包含大小写字母、数字及特殊符号）来确定其安全等级。这种交互通常表现为一条随着输入内容变化的进度条：宽度随复杂度增加而扩展，颜色由弱到强（红、橙、蓝、绿）切换。

实现的核心逻辑是：

获取输入值：监听输入框的 onkeyup（按键抬起）和 onblur（失去焦点）事件。
正则匹配计算：定义一组正则表达式分别检测大写字母、小写字母、数字和特殊字符。统计命中的条件数得出强度系数（0-4）。
DOM与样式更新：根据系数动态修改内部进度元素（如 <span>）的 class 属性，从而触发预先定义的CSS渐变效果。

第1步：构建HTML结构

我们需要一个密码输入框用于捕捉用户数据，一个外部的容器 <div> 作为进度条底色边框，以及内部的子元素 <span> 用来显示实际填充的长度和颜色。同时配置两个提示文字区域，分别用于基础长度提示和具体的强度等级描述。

<font color="#FF0000">*</font>密码：<input type="text" name="password" id="password" value="请输入密码" onfocus="pwdClear()" onblur="pwdComplex(),validatePwd()" onkeyup="pwdComplex()" /><br/>
<font id="pwdTip">不少于6位字符</font><br/>

<!-- 密码强度进度条 -->
<div class="progress-bar"><span class="inner-progress" id="strengthBar"></span></div>
<font id="strengthTip"></font>

第2步：定义CSS样式

设置进度条的基础外观。外层使用黑色细边框圆角，内层默认透明。随后定义四个强度等级的类名，每个类名对应不同的背景颜色和宽度比例，利用 background-color 和 width 属性的变化来实现视觉反馈。

<style type="text/css">
/* 进度条外框 */
.progress-bar {
    border: solid 1px #000;
    border-radius: 5px;
    height: 15px;
    width: 150px;
}

/* 初始空白状态 */
.inner-progress { 
    display: block;
    height: 100%;
    background-color: transparent;
    border-radius: 5px;
    width: 100%;
}

/* 强度弱 - 红色，占25% */
.strengthLv1 { 
    display: block;
    height: 100%;
    border-radius: 5px;
    background: red;
    width: 25%;
}

/* 强度中 - 橙色，占50% */
.strengthLv2 { 
    display: block;
    height: 100%;
    border-radius: 5px;
    background: orange;
    width: 50%;
}

/* 强度高 - 蓝色(#09F)，占75% */
.strengthLv3 { 
    display: block;
    height: 100%;
    border-radius: 5px;
    background: #09F;
    width: 75%;
}

/* 强度超强 - 绿色，占100% */
.strengthLv4 { 
    display: block;
    height: 100%;
    border-radius: 5px;
    background: green;
    width: 100%;
}
</style>

第3步：编写JavaScript校验逻辑

核心函数 pwdComplex() 负责实时运算。首先提取输入框的值及其长度，然后初始化四个正则对象分别代表四类字符特征。如果字符长度小于6位，直接归零；若满足长度要求，则遍历正则数组进行匹配，每命中一项强度分值（sec）加1。最后根据分值切换对应的CSS类名并更新提示文案。

function pwdClear() { // 点击时的清除占位符
    var pwd = document.getElementById("password");
    if(pwd.value == "请输入密码") {
        pwd.value = "";
        pwd.style.color = "#000";
    }
}

function pwdComplex() {
    var pwdObj = document.getElementById("password");
    var tipLength = document.getElementById("pwdTip");
    var barObj = document.getElementById("strengthBar");
    var tipStrength = document.getElementById("strengthTip");

    // 定义正则表达式规则
    var regArray = new Array(4);
    regArray[0] = /[^a-zA-Z0-9_]/g; // 特殊字符
    regArray[1] = /[a-z]/g;         // 小写字母
    regArray[2] = /[0-9]/g;         // 数字
    regArray[3] = /[A-Z]/g;         // 大写字母

    var val = pwdObj.value;
    var len = val.length;
    var score = 0;

    // 必须至少6个字符才计算强度
    if (len >= 6) {
        for (var i = 0; i < regArray.length; i++) {
            if (val.match(regArray[i])) {
                score++;
            }
        }
    } else {
        tipLength.innerHTML = "至少6位字符";
        score = 0;
    }

    // 根据得分应用样式
    if(score == 0) {
        tipStrength.innerText = "";
        barObj.setAttribute("class", "inner-progress");
    } else if(score == 1) {
        tipStrength.innerText = "强度：弱";
        tipStrength.style.color = "red";
        barObj.setAttribute("class", "strengthLv1");
    } else if(score == 2) {
        tipStrength.innerText = "强度：中"; 
        tipStrength.style.color = "orange";
        barObj.setAttribute("class", "strengthLv2");
    } else if(score == 3) {
        tipStrength.innerText = "强度：强"; 
        tipStrength.style.color = "#09F";
        barObj.setAttribute("class", "strengthLv3");
    } else if(score == 4) {
        tipStrength.innerText = "强度：超强"; 
        tipStrength.style.color = "green";
        barObj.setAttribute("class", "strengthLv4");
    }
}