本文详细介绍如何使用JavaScript、HTML和CSS实现一个简单的密码强度实时检测功能。通过监听输入框的onkeyup事件，利用正则表达式判断密码包含的特殊字符、字母和数字，计算安全度并动态调整进度条的宽度与颜色（红、黄、绿），从而在用户注册时提供直观的密码安全性反馈。
密码强度检测功能概述
在注册网站用户时，判断密码强度是一项必要工作，不同网站采用的实现方式各异。密码强度检测本质上是表单验证的一部分，下面我们将演示如何构建这样一个基础功能。
HTML结构与CSS样式设计
首先，我们需要构建基础的HTML结构，包含一个密码输入框和一个用于显示强度的进度条。整体布局由名为vali_pass的容器包裹，内部包含标题、密码输入框以及强度进度条组件。
<div class="vali_pass">
<h3>简单的密码强度检测</h3>
<input type="password" name="pass">
<div class="vali_pass_progress">
<span class="vali_pass_inner_progress"></span>
</div>
</div>
接下来，使用CSS对页面元素进行样式美化，提升用户界面的视觉效果。
.vali_pass {
width: 350px;
margin: 0 auto;
padding: 10px;
border: #eee 1px solid;
text-align: center;
}
.vali_pass input {
width: 96%;
display: block;
margin: 0;
padding: 5px;
font-size: 14px;
line-height: 20px;
}
.vali_pass_progress {
margin-top: 10px;
background-color: #efefef;
height: 10px;
border-radius: 5px;
}
.vali_pass_inner_progress {
display: block;
height: 100%;
background-color: transparent;
border-radius: 5px;
width: 100%;
}我们需要定义进度条的三种状态：低强度、中强度和高强度。具体实现上，通过控制进度条内部盒子的宽度以及背景颜色来区分不同等级，并预设对应的CSS样式类。
.error {
background-color: #ff3300;
}
.middle {
background-color: gold;
}
.strong {
background-color: green;
}
JavaScript监听与逻辑实现
完成HTML结构与CSS美化后，接下来需要编写JavaScript代码来实现动态监听与逻辑处理。
核心逻辑始于为密码输入框绑定文本输入监听事件，以捕获用户的每一次按键操作。
ele_pass.onkeyup = function () {...}
在事件处理函数内部执行密码强度判断逻辑。在此之前，需初始化相关数据，包括用于匹配密码特征的正则表达式数组。
var regxs = [];
regxs.push(/[^a-zA-Z0-9_]/g);
regxs.push(/[a-zA-Z]/g);
regxs.push(/[0-9]/g);
这里使用三个正则表达式依次检测密码特征。初始化完成后，处理onkeyup事件：首先获取输入框的值及其长度，要求密码至少包含6个字符。定义变量sec作为安全度累加值，每匹配一个正则表达式则sec加1，以此反映密码的安全等级。最后将sec换算为0到100之间的数值，该数值用于控制内部进度条的宽度。
ele_pass.onkeyup = function () {
var val = this.value;
var len = val.length;
var sec = 0;
if (len >= 6) { // 至少六个字符
for (var i = 0; i < regxs.length; i++) {
if (val.match(regxs[i])) {
sec++;
}
}
}
var result = (sec / regxs.length) * 100;
ele_progress.style.width = result + "%";
}
设置好进度条宽度后，由于默认背景为透明，仍需根据安全值动态改变背景颜色以直观展示强度。以下代码用于根据计算结果设置进度条的背景样式。
if(result > 0 && result <= 50){
ele_progress.setAttribute("class",begin_classname + " error");
}else if (result > 50 && result < 100) {
ele_progress.setAttribute("class",begin_classname + " middle");
} else if (result == 100) {
ele_progress.setAttribute("class",begin_classname + " strong");
}
以下是完整的JavaScript代码实现。
var ele_pass = document.getElementsByTagName("input")[0];
var ele_progress = document.getElementsByClassName("vali_pass_inner_progress")[0];
var begin_classname = ele_progress.className;
var regxs = [];
regxs.push(/[^a-zA-Z0-9_]/g);
regxs.push(/[a-zA-Z]/g);
regxs.push(/[0-9]/g);
ele_pass.onkeyup = function () {
var val = this.value;
var len = val.length;
var sec = 0;
if (len >= 6) { // 至少六个字符
for (var i = 0; i < regxs.length; i++) {
if (val.match(regxs[i])) {
sec++;
}
}
}
var result = (sec / regxs.length) * 100;
ele_progress.style.width = result + "%";
if(result > 0 && result <= 50){
ele_progress.setAttribute("class",begin_classname + " error");
}else if (result > 50 && result < 100) {
ele_progress.setAttribute("class",begin_classname + " middle");
} else if (result == 100) {
ele_progress.setAttribute("class",begin_classname + " strong");
}
}
实际运行效果如下所示。
以上即为本文的全部内容，希望有助于大家学习JavaScript程序设计。