Home > Article > Web Front-end > js implements password strength detection [with examples]_javascript skills
This article mainly introduces related examples of JS implementation of password strength detection. The first example gives all the code and can be run directly. The second example only gives the JS code. Interested coders can do it themselves Complete the second instance.
First instance
This JavaScript code is more practical. It determines the strength of the password entered by the user when completing user registration, and divides it into three levels: strong, weak, and medium. It can display the corresponding password strength level according to the password entered by the user, making it convenient for users to improve their input. .
Implementation code:
<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>
Second instance:
<script> function AuthPasswd(string) { if (string.length >= 6) { if (/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string) && /\W+\D+/.test(string)) { noticeAssign(1); } else if (/[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); } else if (/\[a-zA-Z]+/.test(string) && /\W+\D+/.test(string)) { noticeAssign( - 1); } else if (/[0-9]+/.test(string) && /\W+\D+/.test(string)) { noticeAssign( - 1); } else { noticeAssign(0); } } } else { noticeAssign(null); } } function noticeAssign(num) { if (num == 1) { $('#weak').css({ backgroundColor: '#009900' }); $('#middle').css({ backgroundColor: '#009900' }); $('#strength').css({ backgroundColor: '#009900' }); $('#strength').html('很强'); $('#middle').html(''); $('#weak').html(''); } else if (num == -1) { $('#weak').css({ backgroundColor: '#ffcc33' }); $('#middle').css({ backgroundColor: '#ffcc33' }); $('#strength').css({ backgroundColor: '' }); $('#weak').html(''); $('#middle').html('中'); $('#strength').html(''); } else if (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>
The above js implementation of password strength detection [with examples] is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.