本文介绍一种基于JavaScript的密码强度实时验证方案。通过监听输入框事件，根据密码包含的数字、大小写字母及特殊字符类型进行加权计算，动态反馈强度等级，帮助用户在注册或修改密码时确保信息安全。
JavaScript实现密码强度实时验证
JavaScript实现密码强度实时验证，供大家参考，具体内容如下
在网络服务中，为保证用户私密信息安全，需输入具备特定安全等级的密码，以有效防止他人盗用。例如注册游戏账号时，若输入纯数字或纯英文字符不足6位，系统会提示密码强度过低并要求重新输入。部分密码强度验证方法通过计算字符类型并进行分类加权累算，权重越高则强度越高。
具体写法及实现方式多样，本文仅介绍其中一种方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>密码强度实时验证</title>
</head>
<body>
<h2>密码强度实时验证</h2>
<input id="passwordStrength" data-hint='请输入密码' type="password" ><span id="showStrength"></span>
<script type="text/javascript">
window.onload = function () {
function setCss(_this,cssOption){
//判断节点类型
if (!_this || _this.nodeType ===3 || _this.nodeType === 8 ||!_this.style) {
return;
}
for(var cs in cssOption){
_this.style[cs] = cssOption[cs];
}
return _this;
}
function trim(chars){
return (chars ||"").replace(/^(\s|\u00a0)+|(\s|\u00a0)+$/g,"");
}
function passwordStrength(passwordStrength,showStrength){
var self = this;
/*字符权重；
数字1，字母2，其他字符为3
当密码长度小于6时不符合标准
长度>=6，强度小于10，强度弱
长度>=6，长度>=10且<15，强度中
长度>=6，强度>=15，强*/
passwordStrength.onkeyup = function(){
var _color = ["red","yellow","orange","green"],
msgs = ["密码太短","弱","中","强"],
_strength = 0,
_v= trim(passwordStrength.value)
_vL= _v.length,
i=0;
var charStrength = function(char){
//计算单个字符强度
if(char>=48 && char <=57){//数字
return 1;
}
if(char>=97 && char<=122){//小写
return 2;
}else{
return 3; //特殊字符
}
}
if(_vL<6){//计算模式
showStrength.innerText = msgs[0];
setCss(showStrength,{
"color":_color[0]
})
}else{
for(;i<_vL;i++){
//遍历字符
_strength+=charStrength(_v.toLocaleLowerCase().charCodeAt(i));
}
if(_strength<10){
//强度小于10
showStrength.innerText = msgs[1];
setCss(showStrength,{
"color":_color[1]
})
}
if(_strength>=10&&_strength<15){
showStrength.innerText = msgs[2];
setCss(showStrength,{
"color":_color[2]
})
}
if(_strength>=15){
showStrength.innerText = msgs[3];
setCss(showStrength,{
"color":_color[3]
})
}
}
}
}
passwordStrength(
document.getElementById("passwordStrength"),
document.getElementById("showStrength"));
};
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。