passwordStrength 基于jquery的密碼強(qiáng)度檢測(cè)代碼使用介紹

更新時(shí)間：2011年10月08日 23:15:53 作者：

我們?cè)O(shè)定密碼強(qiáng)度等級(jí)為10，制作一張圖片表示每個(gè)等級(jí)狀態(tài)，給密碼框綁定keyup事件，通過(guò)keyup事件獲取密碼值，然后使用正則進(jìn)行判斷密碼強(qiáng)度等級(jí)，然后變換相應(yīng)的圖片

查看示例：DEMO 打包下載

使用很簡(jiǎn)單。

復(fù)制代碼代碼如下:

$('#pass').passwordStrength();

XHTML

復(fù)制代碼代碼如下:

 
<p><label>請(qǐng)輸入密碼：</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是用來(lái)加載強(qiáng)度圖片的，你也可以自定義ID，但調(diào)用時(shí)就要給參數(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> 

您可能感興趣的文章:

密碼強(qiáng)度

相關(guān)文章

jQuery使用jsonp實(shí)現(xiàn)百度搜索的示例代碼
這篇文章主要介紹了jQuery使用jsonp實(shí)現(xiàn)百度搜索，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
jQuery+pjax簡(jiǎn)單示例匯總
在github的項(xiàng)目地址里有關(guān)于pjax的詳細(xì)說(shuō)明和使用方法，這里不再贅述，本文主要是使用中的一些代碼記錄和使用心得，方便以后查閱快速上手使用。
2017-04-04
使用jquery模擬a標(biāo)簽的click事件無(wú)法實(shí)現(xiàn)跳轉(zhuǎn)的解決
這篇文章主要給大家介紹了關(guān)于使用jquery模擬a標(biāo)簽的click事件無(wú)法實(shí)現(xiàn)跳轉(zhuǎn)的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
juqery 學(xué)習(xí)之四篩選過(guò)濾
juqery 學(xué)習(xí)之四篩選過(guò)濾函數(shù)說(shuō)明，學(xué)習(xí)jquery的朋友可以參考下。
2010-11-11
6款新穎的jQuery和CSS3進(jìn)度條插件推薦
進(jìn)度條和Loading加載動(dòng)畫(huà)在當(dāng)今的網(wǎng)頁(yè)功能中顯得越來(lái)越重要了，于是接下來(lái)為大家推薦幾款比較新穎進(jìn)度條插件,感興趣的你可以參考下希望可以幫助到你
2013-03-03
jQuery中:contains選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:contains選擇器用法,以實(shí)例形式分析了:contains選擇器的功能、定義及匹配給定元素文本時(shí)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
解決ztree搜索中多級(jí)菜單展示不全問(wèn)題
這篇文章主要介紹了ztree搜索中多級(jí)菜單展示不全的解決方法，需要的朋友參考下吧
2017-07-07
jQuery實(shí)現(xiàn)鼠標(biāo)移入顯示蒙版效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)移入顯示蒙版效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
jQuery中$.click()無(wú)效問(wèn)題分析
這篇文章主要介紹了jQuery中 $("a").click()無(wú)效問(wèn)題分析,需要的朋友可以參考下
2015-01-01
jQuery實(shí)現(xiàn)小火箭返回頂部特效
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)小火箭返回頂部特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02