JavaScript实现密码强度实时验证
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：原生js实现密码强度验证功能
下一篇：js如何验证密码强度