1 <html> 2 <head> 3 <title>js-密码强度</title> 4 5 <script language="javascript" type="text/javascript"> 6 function checkstr(str) 7 { 8 if (str >= 48 && str <= 57)//数字 9 { 10 return 1; 11 } 12 else if (str >= 65 && str <= 90)//大写字母 13 { 14 return 2; 15 } 16 else if (str >= 97 && str <= 122)//小写字母 17 { 18 return 3; 19 } 20 else//特殊字符 21 { 22 return 4; 23 } 24 } 25 26 function checkl(string) 27 { 28 n = false; 29 s = false; 30 t = false; 31 l_num = 0; 32 33 if (string.length < 6) 34 { 35 l_num = 1; 36 } 37 else 38 { 39 for (i = 0; i < string.length; i++) 40 { 41 asc = checkstr(string.charCodeAt(i)); 42 43 if (asc == 1 && n == false) 44 { l_num += 1; n = true; } 45 46 if ((asc == 2 || asc == 3) && s == false) 47 { l_num += 1; s = true; } 48 49 if (asc == 4 && t == false) 50 { l_num += 1; t = true; } 51 } 52 } 53 return l_num; 54 } 55 56 function checklevel(psw) 57 { 58 color = "#ededed"; 59 color_l = "#ff0000"; 60 color_m = "#ff9900"; 61 color_h = "#33cc00"; 62 63 64 if (psw == null || psw == '') 65 { 66 lcor = color; 67 mcor = color; 68 hcor = color; 69 } 70 else 71 { 72 thelev = checkl(psw) 73 switch (thelev) 74 { 75 case 1: 76 lcor = color_l; 77 hcor = mcor = color; 78 break; 79 case 2: 80 mcor = lcor = color_m; 81 hcor = color; 82 break; 83 case 3: 84 hcor = mcor = lcor = color_h; 85 break; 86 default: 87 lcor = mcor = hcor = color; 88 } 89 } 90 document.getElementById("strength_L").style.background = lcor; 91 document.getElementById("strength_M").style.background = mcor; 92 document.getElementById("strength_H").style.background = hcor; 93 } 94 95 </script> 96 97 </head> 98 <body> 99 <form> 100 密码: 101 <input type="password" size="10" onKeyUp="checklevel(this.value)" onChange="checklevel(this.value)" /> 102 <br /><br /><br /> 103 强度: 104 <table width="210" cellspacing="1" cellpadding="0" bordercolor="#cccccc" height="9"> 105 <tr align="center" bgcolor="#eeeeee"> 106 <td width="33%" height="5" id="strength_L"> 107 </td> 108 <td width="33%" id="strength_M"> 109 </td> 110 <td width="33%" id="strength_H"> 111 </td> 112 </tr> 113 </table> 114 </form> 115 </body> 116 </html>