js实现密码强度检测【附示例】
这篇文章主要介绍了js实现密码强度检测的相关实例,第一个例子给出了全部代码,可以直接运行,第二个例子只给出了js代码,感兴趣的码农可以自己完成第二个实例。
第一个实例
这段JavaScript代码比较实用,它完成用户注册时判断用户输入密码的强度,分强、弱、中三等级,它可以根据用户输入的密码显示对应的密码强弱等级,方便用户改进输入。
实现代码:
<html> <head> <title>JS判断密码强度</title> <scriptlanguage=javascript> //判断输入密码的类型 functionCharMode(iN){ if(iN>=48&&iN<=57)//数字 return1; if(iN>=65&&iN<=90)//大写 return2; if(iN>=97&&iN<=122)//小写 return4; else return8; } //bitTotal函数 //计算密码模式 functionbitTotal(num){ modes=0; for(i=0;i<4;i++){ if(num&1)modes++; num>>>=1; } returnmodes; } //返回强度级别 functioncheckStrong(sPW){ if(sPW.length<=4) return0;//密码太短 Modes=0; for(i=0;i<sPW.length;i++){ //密码模式 Modes|=CharMode(sPW.charCodeAt(i)); } returnbitTotal(Modes); } //显示颜色 functionpwStrength(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){ case0: Lcolor=Mcolor=Hcolor=O_color; case1: Lcolor=L_color; Mcolor=Hcolor=O_color; break; case2: 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> <formname=form1action=""> 密码:<inputtype=passwordsize=8onKeyUp=pwStrength(this.value)onBlur=pwStrength(this.value)> <br>密码强度: <tablewidth="210"border="1"cellspacing="0"cellpadding="1"bordercolor="#eeeeee"height="22"style='display:inline'> <tralign="center"bgcolor="#f5f5f5"> <tdwidth="33%"id="strength_L">弱</td> <tdwidth="33%"id="strength_M">中</td> <tdwidth="33%"id="strength_H">强</td> </tr> </table> </form> </body> </html>
第二个实例:
<script> functionAuthPasswd(string){ if(string.length>=6){ if(/[a-zA-Z]+/.test(string)&&/[0-9]+/.test(string)&&/\W+\D+/.test(string)){ noticeAssign(1); }elseif(/[a-zA-Z]+/.test(string)||/[0-9]+/.test(string)||/\W+\D+/.test(string)){ if(/[a-zA-Z]+/.test(string)&&/[0-9]+/.test(string)){ noticeAssign(-1); }elseif(/\[a-zA-Z]+/.test(string)&&/\W+\D+/.test(string)){ noticeAssign(-1); }elseif(/[0-9]+/.test(string)&&/\W+\D+/.test(string)){ noticeAssign(-1); }else{ noticeAssign(0); } } }else{ noticeAssign(null); } } functionnoticeAssign(num){ if(num==1){ $('#weak').css({ backgroundColor:'#009900' }); $('#middle').css({ backgroundColor:'#009900' }); $('#strength').css({ backgroundColor:'#009900' }); $('#strength').html('很强'); $('#middle').html(''); $('#weak').html(''); }elseif(num==-1){ $('#weak').css({ backgroundColor:'#ffcc33' }); $('#middle').css({ backgroundColor:'#ffcc33' }); $('#strength').css({ backgroundColor:'' }); $('#weak').html(''); $('#middle').html('中'); $('#strength').html(''); }elseif(num==0){ $('#weak').css({ backgroundColor:'#dd0000' }); $('#middle').css({ backgroundColor:'' }); $('#strength').css({ backgroundColor:'' }); $('#weak').html('弱'); $('#middle').html(''); $('#strength').html(''); }else{ $('#weak').html(''); $('#middle').html(''); $('#strength').html(''); $('#weak').css({ backgroundColor:'' }); $('#middle').css({ backgroundColor:'' }); $('#strength').css({ backgroundColor:'' }); } }</script>
以上这篇js实现密码强度检测【附示例】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。