位置：首页>> 网络编程>> JavaScript>> jquery密码强度测试工具源码

jquery密码强度测试工具源码

作者：fanxiaojie　来源：韦伯花园的魔法师　发布时间：2009-12-23 19:38:00　

标签：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>aspxhome.com</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>

你也可以把那段javascript拿出来放在一个独立的js文件里，然后再链接到网页里也可以的。

那个$(document).ready(function(){})里的第一句代码意思是说：一载入就把光标定位到网页中第一个表单的第一个输入项上。

然后再找到一个输入域input，type="password" name="password1"。至所以要这样写，因为在注册页里，往往就是有两个密码输入域，第一个name="password1"第二个名为"password2"，用来重复输入密码。另外呢，在登录页里也有一个密码输入域，但是它的name一般是"password"，而不会是其它。所以哪怕是网页中每一页都插入了这段js，它只能在注册页里起作用；$("input[type=password][name=password1]")能抓到想要的东西。

最近我在啃读《网页重构》这本书，努力在尝试提高网页的可读性，甚至希望自己做的网页对盲人来说也没有障碍。我发现在把那个“请输入用户名”用<label>包起来，并加上for的属性，可以让盲人的读屏器工作容易。另外，把每个表单的提交按钮的颜色和其它按钮的颜色区分开，也可以增加网页的可读性。

投稿

jquery密码强度测试工具源码

猜你喜欢