本文實(shí)例為大家分享了jQuery密碼強(qiáng)度驗(yàn)證控件，供大家參考，具體內(nèi)容如下
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.12.1.js"></script> <style type="text/css"> .mainPrompt { border: #999 solid 1px; border-radius: 13px; overflow: hidden; padding: 1px 2px; display: inline-block; height: 20px; } .listPrompt { float: left; height: 20px; width: 56px; margin-right: 2px; background-color: #eeeeee; } .bot_text span { width: 52px; text-align: center; display: inline-block; line-height: 18px; } </style> </head> <body> <br/> <div> <p id="PromptMessage" style="margin-left: 200px;"> 新密碼請至少使用字母、數(shù)字、符號兩種<br/>類型組合的密碼，長度為6~20位。</p> <input type="text" id="txtPassword" style="float: left;"/ placeholder="請輸入密碼"> <div style="margin-left: 30px;font-size: 12px;float: left;"> <div class="mainPrompt" align="center" bgcolor="#f5f5f5"> <div class="listPrompt" id="strength_L" style="border-radius: 8px 0px 0px 8px;"> </div> <div class="listPrompt" id="strength_M"> </div> <div class="listPrompt" id="strength_H" style="margin-right: 0px;border-radius: 0 8px 8px 0;"> </div> </div> <div class="bot_text"> <span id="lowStrength">低</span> <span id="midStrength"> 中</span> <span id="highStrength">高</span> </div> </div> <div> <script type="text/javascript"> function JudgyPwdLevel(pwdStr) { var hasNumber = 0; var hasLetter = 0; var hasSymbol = 0 if (pwdStr.length >= 6) { for (var i = 0; i < pwdStr.length; i++) { var item = pwdStr[i]; if (item >= '0' && item <= '9') { hasNumber = 1; } else if ((item >= 'a' && item <= "z") || (item >= 'A' && item < "Z")) { hasLetter = 1; } else { hasSymbol = 1; } } } return hasLetter + hasNumber + hasSymbol; } //顯示顏色 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 = JudgyPwdLevel(pwd); switch (S_level) { case 0: Lcolor = Mcolor = Hcolor = O_color; case 1: Lcolor = L_color; Mcolor = Hcolor = O_color; break; case 2: Lcolor = L_color; Mcolor = M_color; Hcolor = O_color; break; default: Lcolor = L_color; Mcolor = M_color; 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; } $("#txtPassword").keyup(function(e){ pwStrength($(e.target).val()); }); </script> </body></html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
