前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js判断密码强度

js判断密码强度

作者头像
OECOM
发布2020-07-02 11:17:37
18.2K0
发布2020-07-02 11:17:37
举报
文章被收录于专栏:OECOM

在做管理系统是经常会遇到修改密码的情况,这时,我们需要检测用户输入的密码来判断密码的复杂程度,即密码强度,如下图

QQ图片20160706175439
QQ图片20160706175439

判断密码强度的原理其实就是判断用户输入密码的位数,包含输入字符的种类。一般情况下,用户输入的字符类型有字符、特殊字符和数字,一般情况下,密码的长度不应该小于四位。下面来看一下代码

代码语言:javascript
复制
<html>
<head>
<title>JS判断密码强度</title>
<script language=javascript>  
//判断输入密码的类型  
function CharMode(iN){  
if (iN>=48 && iN <=57) //数字  
return 1;  
if (iN>=65 && iN <=90) //大写  
return 2;  
if (iN>=97 && iN <=122) //小写  
return 4;  
else  
return 8;   
}  
//bitTotal函数  
//计算密码模式  
function bitTotal(num){  
modes=0;  
for (i=0;i<4;i++){  
if (num & 1) modes++;  
num>>>=1;  
}  
return modes;  
}  
//返回强度级别  
function checkStrong(sPW){  
	if (sPW.length<=4)  
	return 0; //密码太短  
	Modes=0;  
	for (i=0;i<sPW.length;i++){  
	//密码模式  
	Modes|=CharMode(sPW.charCodeAt(i));  
	}  
	return bitTotal(Modes);  
}  
  
//显示颜色  
function pwStrength(pwd){  
O_color="#eeeeee";  
L_color="#FF0000";  
M_color="#FF9900";  
H_color="#33CC00";  
if (pwd==null||pwd==''){  
Lcolor=Mcolor=Hcolor=O_color;  
}  
else{  
S_level=checkStrong(pwd);  
switch(S_level) {  
case 0:  
Lcolor=Mcolor=Hcolor=O_color;  
case 1:  
Lcolor=L_color;  
Mcolor=Hcolor=O_color;  
break;  
case 2:  
Lcolor=Mcolor=M_color;  
Hcolor=O_color;  
break;  
default:  
Lcolor=Mcolor=Hcolor=H_color;  
}  
}  
document.getElementById("strength_L").style.background=Lcolor;  
document.getElementById("strength_M").style.background=Mcolor;  
document.getElementById("strength_H").style.background=Hcolor;  
return;  
}  
</script>
</head>
<body>  
<form name=form1 action="" >  
密码:<input type=password size=8 onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value)>  
<br>密码强度:  
<table width="210" border="1" cellspacing="0" cellpadding="1" bordercolor="#eeeeee" height="22" style='display:inline'>  
<tr align="center" bgcolor="#f5f5f5">  
<td width="33%" id="strength_L">弱</td>  
<td width="33%" id="strength_M">中</td>  
<td width="33%" id="strength_H">强</td>  
</tr>  
</table>  
</form>
</body>
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-07-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档