passwordStrength 基于jquery的密碼強度檢測代碼使用介紹
更新時間：2011年10月08日 23:15:53 作者：
我們設(shè)定密碼強度等級為10，制作一張圖片表示每個等級狀態(tài)，給密碼框綁定keyup事件，通過keyup事件獲取密碼值，然后使用正則進(jìn)行判斷密碼強度等級，然后變換相應(yīng)的圖片
查看示例：DEMO 打包下載
$('#pass').passwordStrength();
XHTML
<p><label>請輸入密碼：</label>
<input type="password" id="pass" class="input" /></p>
<div id="passwordStrengthDiv" class="is0"></div>
<p><label>確認(rèn)密碼：</label>
<input type="password" id="repass" class="input" /></p>
注意：id#passwordStrengthDiv的DIV是用來加載強度圖片的，你也可以自定義ID，但調(diào)用時就要給參數(shù)賦值：
targetDiv : '#ID' //自定義加載圖片的ID
載入JS和CSS：
<link rel="stylesheet" type="text/css" href="style/main.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.passwordStrength.js"></script>
<script type="text/javascript">
$(function(){
$('#pass').passwordStrength();
});
</script>
使用很簡單。
復(fù)制代碼 代碼如下:
$('#pass').passwordStrength();
XHTML
復(fù)制代碼 代碼如下:
<p><label>請輸入密碼：</label>
<input type="password" id="pass" class="input" /></p>
<div id="passwordStrengthDiv" class="is0"></div>
<p><label>確認(rèn)密碼：</label>
<input type="password" id="repass" class="input" /></p>
注意：id#passwordStrengthDiv的DIV是用來加載強度圖片的，你也可以自定義ID，但調(diào)用時就要給參數(shù)賦值：
復(fù)制代碼 代碼如下:
targetDiv : '#ID' //自定義加載圖片的ID
載入JS和CSS：
復(fù)制代碼 代碼如下:
<link rel="stylesheet" type="text/css" href="style/main.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.passwordStrength.js"></script>
<script type="text/javascript">
$(function(){
$('#pass').passwordStrength();
});
</script>
相關(guān)文章
jQuery使用jsonp實現(xiàn)百度搜索的示例代碼
這篇文章主要介紹了jQuery使用jsonp實現(xiàn)百度搜索，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
在github的項目地址里有關(guān)于pjax的詳細(xì)說明和使用方法，這里不再贅述，本文主要是使用中的一些代碼記錄和使用心得，方便以后查閱快速上手使用。2017-04-04
使用jquery模擬a標(biāo)簽的click事件無法實現(xiàn)跳轉(zhuǎn)的解決
這篇文章主要給大家介紹了關(guān)于使用jquery模擬a標(biāo)簽的click事件無法實現(xiàn)跳轉(zhuǎn)的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
juqery 學(xué)習(xí)之四 篩選過濾函數(shù)說明，學(xué)習(xí)jquery的朋友可以參考下。2010-11-11
進(jìn)度條和Loading加載動畫在當(dāng)今的網(wǎng)頁功能中顯得越來越重要了，于是接下來為大家推薦幾款比較新穎進(jìn)度條插件,感興趣的你可以參考下希望可以幫助到你2013-03-03
這篇文章主要介紹了jQuery中:contains選擇器用法,以實例形式分析了:contains選擇器的功能、定義及匹配給定元素文本時的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了ztree搜索中多級菜單展示不全的解決方法，需要的朋友參考下吧2017-07-07
jQuery實現(xiàn)鼠標(biāo)移入顯示蒙版效果
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)鼠標(biāo)移入顯示蒙版效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了jQuery中 $("a").click()無效問題分析,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)小火箭返回頂部特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02