jQuery密碼強度驗證控件使用詳解
更新時間：2017年01月05日 15:13:38 作者：csmzl
這篇文章主要為大家詳細介紹了jQuery密碼強度驗證控件使用的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery密碼強度驗證控件，供大家參考，具體內容如下
<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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了jQuery編寫textarea輸入字數(shù)限制代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家介紹了如何利用JQuery實現(xiàn)相鄰item焦點移動的效果，文中的示例代碼講解詳細，對我們學習前端知識有一定的幫助，感興趣的可以學習一下2022-04-04
JQuery事件e參數(shù)的方法preventDefault()取消默認行為
JQuery事件的e參數(shù)的方法preventDefault()可以取消對象的默認行為，下有個不錯的示例，大家可以參考下，希望對大家有所幫助2013-09-09
JQuery下的Live方法和$.browser方法使用代碼
網(wǎng)站做好了，老師卻要求要3級菜單，無奈只好去做3級菜單了。這次3級菜單的思路是在原有不變的基礎上，對有3級菜單的ID，選擇進入新的一個控件。在這個新的控件里用ajax去請求其3級目錄里的東西。2010-06-06
jQuery序列化form表單數(shù)據(jù)為JSON對象的實現(xiàn)方法
這篇文章主要介紹了jQuery序列化form表單數(shù)據(jù)為JSON對象的實現(xiàn)方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了jquery插件格式,結合實例形式簡單分析了jQuery插件的結構與開發(fā)技巧,并附帶了一本相關電子書供讀者下載參考,需要的朋友可以參考下2016-06-06
jQuery移動端跑馬燈抽獎特效升級版(抽獎概率固定)實現(xiàn)方法
這篇文章主要介紹了jQuery移動端跑馬燈抽獎特效升級版(抽獎概率固定)實現(xiàn)方法,涉及jQuery數(shù)值運算及條件判斷等相關操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了jQuery刪除一個元素后淡出效果展示刪除過程的方法,實例分析了jQuery中fadeTo及slideUp等方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery分組選擇器用法,以實例形式分析了分組選擇器的功能與具體用法技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
jquery常用技巧及常用方法列表集合，學習jquery的朋友可以收藏下。方便查找學習。2011-04-04