本文介绍如何使用原生JavaScript实现前端密码强度的实时检测与可视化显示。通过监听输入框事件，根据密码包含的数字、大小写字母及特殊字符数量动态计算强度等级，并更新对应的CSS样式条，满足一般注册场景的安全提示需求。
密码强度检测方案概述
在通行证项目的注册模块开发中，需要实现用户输入密码时实时显示强度等级（低、中、高）。本文分享的方案代码简洁，无需依赖复杂的外部库，足以应对常规的安全提示需求。
HTML结构定义
HTML结构部分定义了密码输入框及用于展示强度条的容器元素。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>密码强度</title>
<style type="text/css">
#passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;}
.strengthLv1{background:red;height:6px;width:40px;}
.strengthLv2{background:orange;height:6px;width:80px;}
.strengthLv3{background:green;height:6px;width:120px;}
</style>
</head>
<body>
<input type="password" name="pass" id="pass" maxlength="16"/>
<div class="pass-wrap">
<em>密码强度：</em>
<div id="passStrength"></div>
</div>
</body>
</html>
<script type="text/javascript" src="js/passwordStrength.js"></script>
<script type="text/javascript">
new PasswordStrength('pass','passStrength');
</script>
JavaScript核心实现
核心逻辑由JavaScript实现，主要包含构造函数与原型方法。
function PasswordStrength(passwordID,strengthID){
this.init(strengthID);
var _this = this;
document.getElementById(passwordID).onkeyup = function(){
_this.checkStrength(this.value);
}
};
PasswordStrength.prototype.init = function(strengthID){
var id = document.getElementById(strengthID);
var div = document.createElement('div');
var strong = document.createElement('strong');
this.oStrength = id.appendChild(div);
this.oStrengthTxt = id.parentNode.appendChild(strong);
};
PasswordStrength.prototype.checkStrength = function (val){
var aLvTxt = ['','低','中','高'];
var lv = 0;
if(val.match(/[a-z]/g)){lv++;}
if(val.match(/[0-9]/g)){lv++;}
if(val.match(/(.[^a-z0-9])/g)){lv++;}
if(val.length < 6){lv=0;}
if(lv > 3){lv=3;}
this.oStrength.className = 'strengthLv' + lv;
this.oStrengthTxt.innerHTML = aLvTxt[lv];
};
效果展示
运行效果展示密码强度条随输入内容变化的视觉反馈。
使用说明与配置
具体使用与配置说明如下：
1、实例化对象时，第一个参数指定密码输入框的id属性值，第二个参数指定强度显示条容器的id属性值。
2、在checkStrength方法内部，可根据业务需求自定义判断密码强度的具体规则逻辑。
3、强度等级分为低、中、高三档，分别对应CSS类名strengthLv1、strengthLv2和strengthLv3，通过切换class实现样式变化。
以上即为基于JavaScript实现密码强度检测的完整方案，希望对相关开发工作提供参考。