本來是英文版的，我改了一點，提示什么的都是中文的了，

從這里下載 jquery.pstrength.js 強度驗證插件！然后在網頁中引用jquery文件和這個插件

XML/HTML代碼

<script src="/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery.pstrength.js"></script>

然后使用以下函數

JavaScript代碼

jQuery(document).ready(function(){
jQuery('#password1').pstrength();
});

#password是你的密碼框ID

根據你的情況不同，你可以自定義你的密碼強度，我定義的是這樣的

JavaScript代碼

$.extend($.fn, {
pstrength: function(options) {
var options = $.extend({
verdects: ["很不安全", "不安全", "一般", "安全的", "非常安全"],
colors: ["#f00", "#c06", "#f60", "#3c0", "#3f0"],
scores: [10, 15, 30, 40],
common: ["password", "sex", "god", "123456", "123", "liverpool", "letmein", "qwerty", "monkey"],
minchar: 6
}, options);

效果如下：

jQuery密碼強度檢驗插件

一款不錯的密碼強度插件！

1 jquery.pstrength插件和jquery文件

2 載入jquery文件和jquery.pstrength文件

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.pstrength-min.1.2.js">
</script>
<script type="text/javascript">
$(function() {
$('#user_password').pstrength();
});
</script>

3 HTML加入密碼輸入框，id=”user_password”:

密碼：<input type="password" id="user_password" name="user_password" />

4 css:

.pstrength-minchar {
font-size : 10px;
}
input {
width:180px;
height:12px;
line-height:12px;
padding:4px 0px;
border: #cfcfcf 1px solid;
color: #585858;
}

演示地址

插件官方地址：Ajax Password Strength Meter Script

用jquery寫了一個簡單的密碼強度測試工具

最近正在用功的學習jQuery，在琢磨了不少別人寫的功能之后，也開始嘗試著自己開發一些功能。今天我做了一個簡單的密碼強度測試工具。

這可功能的作用可以看下面這個截圖。我已經在多種瀏覽器中測試過它了。

閑話不提，上代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript" src="common/xheditor/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.popbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form:eq(0) input:eq(0)").focus();
$("input[type=password][name=password1]").focus(function(){
var position=$(this).offset()
var $pwStrength=$('<div id="pwStrength"></div>').appendTo("body");
$pwStrength.css({"position":"absolute","width":120,"height":12,"left":position.left,"top":position.top+28,"background":"#FFFF80","fontSize":"10px","line-height":"12px","color":"#ffffff"});
$('<span>弱</span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#ff0000","position":"absolute","padding-left":"14px"}).appendTo($pwStrength);
$('<span>中</span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#FF9900","position":"absolute","padding-left":"54px"}).appendTo($pwStrength);
$('<span>強</span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#008000","position":"absolute","padding-left":"94px"}).appendTo($pwStrength);
$('<span></span>').css({"width":39,"height":12,"display":"block","flowover":"hidden","position":"absolute","margin-left":"40px","border-left":"1px solid #fff","border-right":"1px solid #fff"}).appendTo($pwStrength);
})
.keyup(function(){var pwd=$(this).val();$("#pwStrength span:lt(3)").css({"display":"none"});
var CharMode=function(iN){if(iN>=48&&iN<=57)return 1;if(iN>=65&&iN<=90)return 2;if(iN>=97&&iN<=122)return 4;else return 8;}
var bitTotal=function(num){modes=0;for (i=0;i<5;i++){if(num & 1) modes++;num>>>=1;}return modes;}
var checkStrong=function (sPW){if(sPW.length<=5)return 0;Modes=0;for (i=0;i<sPW.length;i++){Modes|=CharMode(sPW.charCodeAt(i)); }return bitTotal(Modes);}
if(pwd!=''&&pwd!=null){var level=checkStrong(pwd);if(level==0)$("#pwStrength span:eq(0)").css({"display":"block"});if(level==1)$("#pwStrength span:eq(1)").css({"display":"block"});if(level==2)$("#pwStrength span:eq(2)").css({"display":"block"});}})
.blur(function(){$("#pwStrength").remove()});
})
</script>
<style type="text/css">
body{font-size:12px;line-height:20px;text-align:left;}
th{text-align:right;color:#336688;font-weight:normal;}
input{border-right:1px solid #e1e5e8;border-bottom:1px solid #e1e5e8;border-left:1px solid #999999;border-top:1px solid #999999;background:#f1f2f3;font-size:12px;line-height:15px;height:17px;color:#666666;padding:1px 2px;}
button{border-left:1px solid #d4d6d8;border-top:1px solid #d4d6d8;border-right:1px solid #666666;border-bottom:1px solid #666666;background:#999999;font-size:12px;line-height:20px;height:20px;padding:0 8px;color:#ffffff;}
button.submit{border-left:1px solid #d4d6d8;border-top:1px solid #d4d6d8;border-right:1px solid #003366;border-bottom:1px solid #003366;background:#336699;font-size:12px;line-height:20px;height:20px;padding:0 8px;color:#ffffff;}
</style>
</head>
<body>
<form>
<table border="0" cellpadding="3" cellspacing="0">
<tr><th><label for="username">請輸入用戶名</label></th><td>
<input type="text" name="username" size="19" maxlength="16"/></td></tr>
<tr><th><label for="password1">請輸入密碼</label></th><td>
<input type="password" name="password1" value="" size="19" maxlength="18" /></td></tr>
<tr><th><label for="password2">請再次輸入密碼</label></th><td>
<input type="password" name="password2" value="" size="19" maxlength="18" /></td></tr>
<tr><th> </th><td><button type="submit" class="submit">提交</button> <button type="reset">重置</button></td></tr>
</table>
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript" src="common/xheditor/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.popbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form:eq(0) input:eq(0)").focus();
$("input[type=password][name=password1]").focus(function(){
var position=$(this).offset()
var $pwStrength=$('<div id="pwStrength"></div>').appendTo("body");
$pwStrength.css({"position":"absolute","width":120,"height":12,"left":position.left,"top":position.top+28,"background":"#FFFF80","fontSize":"10px","line-height":"12px","color":"#ffffff"});
$('<span>弱</span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#ff0000","position":"absolute","padding-left":"14px"}).appendTo($pwStrength);
$('<span>中</span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#FF9900","position":"absolute","padding-left":"54px"}).appendTo($pwStrength);
$('<span>強</span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#008000","position":"absolute","padding-left":"94px"}).appendTo($pwStrength);
$('<span></span>').css({"width":39,"height":12,"display":"block","flowover":"hidden","position":"absolute","margin-left":"40px","border-left":"1px solid #fff","border-right":"1px solid #fff"}).appendTo($pwStrength);
})
.keyup(function(){var pwd=$(this).val();$("#pwStrength span:lt(3)").css({"display":"none"});
var CharMode=function(iN){if(iN>=48&&iN<=57)return 1;if(iN>=65&&iN<=90)return 2;if(iN>=97&&iN<=122)return 4;else return 8;}
var bitTotal=function(num){modes=0;for (i=0;i<5;i++){if(num & 1) modes++;num>>>=1;}return modes;}
var checkStrong=function (sPW){if(sPW.length<=5)return 0;Modes=0;for (i=0;i<sPW.length;i++){Modes|=CharMode(sPW.charCodeAt(i)); }return bitTotal(Modes);}
if(pwd!=''&&pwd!=null){var level=checkStrong(pwd);if(level==0)$("#pwStrength span:eq(0)").css({"display":"block"});if(level==1)$("#pwStrength span:eq(1)").css({"display":"block"});if(level==2)$("#pwStrength span:eq(2)").css({"display":"block"});}})
.blur(function(){$("#pwStrength").remove()});
})
</script>
<style type="text/css">
body{font-size:12px;line-height:20px;text-align:left;}
th{text-align:right;color:#336688;font-weight:normal;}
input{border-right:1px solid #e1e5e8;border-bottom:1px solid #e1e5e8;border-left:1px solid #999999;border-top:1px solid #999999;background:#f1f2f3;font-size:12px;line-height:15px;height:17px;color:#666666;padding:1px 2px;}
button{border-left:1px solid #d4d6d8;border-top:1px solid #d4d6d8;border-right:1px solid #666666;border-bottom:1px solid #666666;background:#999999;font-size:12px;line-height:20px;height:20px;padding:0 8px;color:#ffffff;}
button.submit{border-left:1px solid #d4d6d8;border-top:1px solid #d4d6d8;border-right:1px solid #003366;border-bottom:1px solid #003366;background:#336699;font-size:12px;line-height:20px;height:20px;padding:0 8px;color:#ffffff;}
</style>
</head>
<body>
<form>
<table border="0" cellpadding="3" cellspacing="0">
<tr><th><label for="username">請輸入用戶名</label></th><td>
<input type="text" name="username" size="19" maxlength="16"/></td></tr>
<tr><th><label for="password1">請輸入密碼</label></th><td>
<input type="password" name="password1" value="" size="19" maxlength="18" /></td></tr>
<tr><th><label for="password2">請再次輸入密碼</label></th><td>
<input type="password" name="password2" value="" size="19" maxlength="18" /></td></tr>
<tr><th>&nbsp;</th><td><button type="submit" class="submit">提交</button> <button type="reset">重置</button></td></tr>
</table>
</form>
</body>
</html>

你也可以把那段javascript拿出來放在一個獨立的js文件里，然后再鏈接到網頁里也可以的。

那個$(document).ready(function(){})里的第一句代碼意思是說：一載入就把光標定位到網頁中第一個表單的第一個輸入項上。

然后再找到一個輸入域input，type="password" name="password1"。至所以要這樣寫，因為在注冊頁里，往往就是有兩個密碼輸入域，第一個name="password1"第二個名為"password2"，用來重復輸入密碼。另外呢，在登錄頁里也有一個密碼輸入域，但是它的name一般是"password"，而不會是其它。所以哪怕是網頁中每一頁都插入了這段js，它只能在注冊頁里起作用；$("input[type=password][name=password1]")能抓到想要的東西。

最近我在啃讀《網頁重構》這本書，努力在嘗試提高網頁的可讀性，甚至希望自己做的網頁對盲人來說也沒有障礙。我發現在把那個“請輸入用戶名” 用<label>包起來，并加上for的屬性，可以讓盲人的讀屏器工作容易。另外，把每個表單的提交按鈕的顏色和其它按鈕的顏色區分開，也可以增加網頁的可讀性。

posted on 2009-12-21 16:14 seal 閱讀(5708) 評論(6) 編輯收藏所屬分類: JQuery


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: JQuery中常用的Calender和DatePicker組件 14個基于jQuery的圖片展示和幻燈片插件（轉） 15個使用jQuery實現圖片幻燈片效果的JS源碼(轉) 35個奪人眼球的jquery菜單下載（轉）基于jQuery的facebox使用 jquery和prototype沖突解決 (轉) jquery-validate學習(轉) 幾個jquery驗證密碼強度的插件客戶端驗證的極品--jQuery.validator(轉) 2009 年度最佳 jQuery 插件(轉)

Sealyu

常用鏈接

留言簿(14)

隨筆分類

隨筆檔案

友情鏈接

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜

jQuery密碼強度檢驗插件

用jquery寫了一個簡單的密碼強度測試工具

評論