JavaScript实现密码强度实时校验功能
作者:闭包旅人时间:2026-10-22 05:20:14浏览:484
本文介绍如何使用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;
}
以上即为本文的全部内容,希望能为读者提供学习参考,也欢迎继续支持本站。
作者最新文章
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38
