本文實例講述了jQuery實現注冊會員時密碼強度提示信息功能。分享給大家供大家參考，具體如下：
1.效果如圖所示：
2.html代碼：
<p><span>設置密碼：</span><input type="password" id="external_regist_password1" name="password1" value="" /><b>*</b><span id="password1_bg" class="bg_rt" style="display:none"></span></p><p class="mima_qd" id="password1_strength" style="display:none"> <span class="mm_strength"><em>密碼強度</em> <i class="password_qd"> <span class="password_bg" id="strength_L"></span> <span class="password_bg" id="strength_M"></span> <span class="password_bg" id="strength_H"></span> </i> <em id="pw_check_info"></em></span></p><p class="tishi_wr" id="password1_info"></p>
3.jquery代碼：
//checkStrong函數//返回密碼的強度級別function checkStrong(sPW){ if (sPW.length<=4) return 0; //密碼太短 var Modes=0; for (i=0;i<sPW.length;i++){ //測試每一個字符的類別并統計一共有多少種模式. //charCodeAt():返回unicode編碼的值 Modes|=CharMode(sPW.charCodeAt(i)); //測試某個字符屬于哪一類 } return bitTotal(Modes);//計算出當前密碼當中一共有多少種模式}//CharMode函數//測試某個字符是屬于哪一類.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){ var modes=0; for (i=0;i<4;i++){ if (num & 1) modes++; num>>>=1; } return modes;}//pwStrength函數//當用戶放開鍵盤或密碼輸入框失去焦點時,根據不同的級別顯示不同的顏色function pwStrength(pwd){ var O_color="#eeeeee"; var L_color="#FF4040"; var M_color="#FF9900"; var H_color="#33CC00"; var info = ""; if (pwd==null||pwd==''){ Lcolor=Mcolor=Hcolor=O_color; } else { S_level=checkStrong(pwd);//檢測密碼的強度 switch(S_level) { case 0: Lcolor=L_color; Mcolor=Hcolor=O_color; info = "弱"; break; case 1: Lcolor=L_color; Mcolor=Hcolor=O_color; info = "弱"; break; case 2: Lcolor=Mcolor=M_color; Hcolor=O_color; info = "中"; break; default: Lcolor=Mcolor=Hcolor=H_color; info = "強"; } } $("#strength_L").css("background", Lcolor); $("#strength_M").css("background", Mcolor); $("#strength_H").css("background", Hcolor); $("#pw_check_info").html(info);//密碼強度提示信息 return;}PS：這里再為大家提供兩款相關在線工具供大家參考使用：
密碼安全性在線檢測：
http://tools.VeVB.COm/password/my_password_safe
高強度密碼生成器：
http://tools.VeVB.COm/password/CreateStrongPassword
在線隨機數字/字符串生成工具：
http://tools.VeVB.COm/aideddesign/suijishu
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery form操作技巧匯總》、《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
