本文介绍如何使用JavaScript、HTML和CSS实现密码强度的实时校验功能。通过正则表达式检测数字、字母及特殊字符，结合密码长度限制，动态判断并展示弱、中、强三种强度状态，适用于注册页面的用户体验优化。
密码强度校验功能概述
密码强度通常分为四个状态，具体表现如下图所示。
当未输入密码时，显示为无密码状态。
当密码强度较低时，显示为低级状态。
当密码强度中等时，显示为中级状态。
当密码强度较高时，显示为高级状态。
代码实现详解
实现该功能的核心代码如下：
HTML结构部分如下：
<input name="password" type="PassWord" onKeyUp="CheckIntensity(this.value)">
<table border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td id="pwd_Weak" class="pwd pwd_c"> </td>
<td id="pwd_Medium" class="pwd pwd_c pwd_f">无</td>
<td id="pwd_Strong" class="pwd pwd_c pwd_c_r"> </td>
</tr>
</table>
CSS样式部分如下：
.pwd{width:50px;height:20px;line-height:14px;padding-top:2px;}
.pwd_f{color:#BBBBBB;}
.pwd_c{background-color:#F3F3F3;border-top:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-left:1px solid #D0D0D0;}
.pwd_Weak_c{background-color:#FF4545;border-top:1px solid #BB2B2B;border-bottom:1px solid #BB2B2B;border-left:1px solid #BB2B2B;}
.pwd_Medium_c{background-color:#FFD35E;border-top:1px solid #E9AE10;border-bottom:1px solid #E9AE10;border-left:1px solid #E9AE10;}
.pwd_Strong_c{background-color:#3ABB1C;border-top:1px solid #267A12;border-bottom:1px solid #267A12;border-left:1px solid #267A12;}
.pwd_c_r{border-right:1px solid #D0D0D0;}
.pwd_Weak_c_r{border-right:1px solid #BB2B2B;}
.pwd_Medium_c_r{border-right:1px solid #E9AE10;}
.pwd_Strong_c_r{border-right:1px solid #267A12;}
JavaScript逻辑部分如下：
function CheckIntensity(pwd) {
var Mcolor, Wcolor, Scolor, Color_Html;
var m = 0;
//匹配数字
if (/\d+/.test(pwd)) {
debugger;
m++;
};
//匹配字母
if (/[A-Za-z]+/.test(pwd)) {
m++;
};
//匹配除数字字母外的特殊符号
if (/[^0-9a-zA-Z]+/.test(pwd)) {
m++;
};
if (pwd.length <= 6) { m = 1; }
if (pwd.length <= 0) { m = 0; }
switch (m) {
case 1:
Wcolor = "pwd pwd_Weak_c";
Mcolor = "pwd pwd_c";
Scolor = "pwd pwd_c pwd_c_r";
Color_Html = "弱";
break;
case 2:
Wcolor = "pwd pwd_Medium_c";
Mcolor = "pwd pwd_Medium_c";
Scolor = "pwd pwd_c pwd_c_r";
Color_Html = "中";
break;
case 3:
Wcolor = "pwd pwd_Strong_c";
Mcolor = "pwd pwd_Strong_c";
Scolor = "pwd pwd_Strong_c pwd_Strong_c_r";
Color_Html = "强";
break;
default:
Wcolor = "pwd pwd_c";
Mcolor = "pwd pwd_c pwd_f";
Scolor = "pwd pwd_c pwd_c_r";
Color_Html = "无";
break;
}
document.getElementById('pwd_Weak').className = Wcolor;
document.getElementById('pwd_Medium').className = Mcolor;
document.getElementById('pwd_Strong').className = Scolor;
document.getElementById('pwd_Medium').innerHTML = Color_Html;
}
以上即为本文的全部内容，希望能为读者提供学习参考，也欢迎继续支持本站。