微客导航 » 文章资讯 » JavaScript实现密码强度实时验证

JavaScript实现密码强度实时验证

2023-07-28 12:06:08 153

JavaScript实现密码强度实时验证，供大家参考，具体内容如下

在网络服务中，为了保证用户的私密信息足够安全，会要求用户输入具有一定安全级别的密码，这样可以更好的防止他人盗用。比如在注册一些游戏账号时，如果输入纯数字或纯英文字符低于6位，就会提示密码强度太低，请重新输入。一些密码强度验证的方法都是计算字符的类型，然后分类加权累算。权重越高，相应的强度也就越高。

具体的写法及实现方式有很多种，本文只介绍其中一种方案





密码强度实时验证



密码强度实时验证




window.onload=function(){
functionsetCss(_this,cssOption){
//判断节点类型
if(!_this||_this.nodeType===3||_this.nodeType===8||!_this.style){
return;
}
for(varcsincssOption){
_this.style[cs]=cssOption[cs];
}
return_this;
}

functiontrim(chars){
return(chars||"").replace(/^(\s|\u00a0)+|(\s|\u00a0)+$/g,"");
}
functionpasswordStrength(passwordStrength,showStrength){
varself=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;

varcharStrength=function(char){
//计算单个字符强度
if(char>=48&&char<=57){//数字
return1;
}
if(char>=97&&char<=122){//小写
return2;
}else{
return3;//特殊字符
}
}

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"));

};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

JavaScript实现密码强度实时验证

密码强度实时验证

热门推荐

随机推荐