Js密碼強(qiáng)度實(shí)時(shí)驗(yàn)證代碼

2019-11-21 00:26:38

字體：大中小

供稿：網(wǎng)友

效果圖:

演示代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>密碼強(qiáng)度測試</title> </head> <script language="javascript" type="text/javascript"> //CharMode函數(shù) //測試某個(gè)字符是屬于哪一類. function CharMode(iN){ if (iN>=48 && iN <=57) //數(shù)字 return 1; if (iN>=65 && iN <=90) //大寫字母 return 2; if (iN>=97 && iN <=122) //小寫 return 4; else return 8; //特殊字符 } //bitTotal函數(shù) //計(jì)算出當(dāng)前密碼當(dāng)中一共有多少種模式 function bitTotal(num){ modes=0; for (i=0;i<4;i++){ if (num & 1) modes++; num>>>=1; } return modes; } //checkStrong函數(shù) //返回密碼的強(qiáng)度級別 function checkStrong(sPW){ if (sPW.length<=4) return 0; //密碼太短 Modes=0; for (i=0;i<sPW.length;i++){ //測試每一個(gè)字符的類別并統(tǒng)計(jì)一共有多少種模式. Modes|=CharMode(sPW.charCodeAt(i)); } return bitTotal(Modes); } //pwStrength函數(shù) //當(dāng)用戶放開鍵盤或密碼輸入框失去焦點(diǎn)時(shí),根據(jù)不同的級別顯示不同的顏色 function pwStrength(pwd){ O_color="#e0f0ff"; L_color="#FF0000"; M_color="#FF9900"; H_color="#33CC00"; if (pwd==null||pwd==''){ Lcolor=Mcolor=Hcolor=O_color; } else { S_level=checkStrong(pwd); //alert(S_level); 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> <body> <form id="form1"> <div> 輸入密碼:<input type="text" id="TextBox1" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)"><br> 密碼強(qiáng)度: <table border="1" cellpadding="1" bordercolordark="#fdfeff" bordercolorlight="#99ccff" cellspacing="1" style="width: 200px; display: inline; background-color: #e0f0ff"> <tr> <td id="strength_L" style="width: 100px; height: 19px;" align="center"> 弱 </td> <td id="strength_M" style="width: 100px; height: 19px;" align="center"> 中 </td> <td id="strength_H" style="width: 100px; height: 19px;" align="center"> 強(qiáng) </td> </tr> </table> </div> </form> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：Extjs中常用表單介紹與應(yīng)用

下一篇：javascript調(diào)試說明