jQuery密碼強(qiáng)度驗(yàn)證控件使用詳解
本文實(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;"> 新密碼請(qǐng)至少使用字母、數(shù)字、符號(hào)兩種<br/>類型組合的密碼,長(zhǎng)度為6~20位。</p> <input type="text" id="txtPassword" style="float: left;"/ placeholder="請(qǐng)輸入密碼"> <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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于JQuery的密碼強(qiáng)度驗(yàn)證代碼
- jquery判斷密碼強(qiáng)度的驗(yàn)證代碼
- jQuery判斷密碼強(qiáng)度實(shí)現(xiàn)思路及代碼
- passwordStrength 基于jquery的密碼強(qiáng)度檢測(cè)代碼使用介紹
- jquery密碼強(qiáng)度校驗(yàn)
- jQuery實(shí)現(xiàn)提示密碼強(qiáng)度的代碼
- jQuery密碼強(qiáng)度檢測(cè)插件passwordStrength用法實(shí)例分析
- jQuery插件passwordStrength密碼強(qiáng)度指標(biāo)詳解
- jQuery實(shí)用密碼強(qiáng)度檢測(cè)
- jQuery實(shí)現(xiàn)注冊(cè)會(huì)員時(shí)密碼強(qiáng)度提示信息功能示例
相關(guān)文章
jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效,功能實(shí)現(xiàn)非常簡(jiǎn)單,推薦給大家,有需要的小伙伴可以參考下。2015-08-08Jquery chosen動(dòng)態(tài)設(shè)置值實(shí)例介紹
Jquery chosen一款選擇插件,支持檢索,多選,但不支持輸入效果,下面與大家分享下其使用示例,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08jQuery解決下拉框select設(shè)寬度時(shí)IE 6/7/8下option超出顯示不全
jQuery解決IE 6/7/8 BUG:下拉框select設(shè)寬度時(shí)option超出顯示不全,經(jīng)過修改效果還不錯(cuò),遇到類似情況的朋友可以參考下哈2013-05-05推薦40個(gè)非常優(yōu)秀的jQuery插件和教程【系列三】
jQuery 在如今的 Web 開發(fā)項(xiàng)目中扮演著重要角色,jQuery 以其插件眾多、獨(dú)特、輕量以及支持大規(guī)模的網(wǎng)站開發(fā)聞名。本文大家分享40個(gè)實(shí)用的 jQuery 插件,可以根據(jù)您的項(xiàng)目需要來選擇使用2011-11-11使用jQuery內(nèi)容過濾選擇器選擇元素實(shí)例講解
內(nèi)容過濾選擇器:根據(jù)元素中的文字內(nèi)容或所包含的子元素特征獲取元素,其文字內(nèi)容可以模糊或絕對(duì)匹配進(jìn)行元素定位,接下來為大家詳細(xì)介紹下jQuery選擇器,感興趣的朋友可以參考下哈2013-04-04jquery ztree實(shí)現(xiàn)下拉樹形框使用到了json數(shù)據(jù)
項(xiàng)目需要用到樹形下拉框,采用了zTree來實(shí)現(xiàn),因?yàn)榇a的移植性比較高,下面是實(shí)現(xiàn)的代碼2014-05-05