JavaScript
搜索
分类

jquery密码强度测试工具源码

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

最近正在用功的学习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>&nbsp;</th><td><button type="submit" class="submit">提交</button>&nbsp;<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,密码强度,工具,检测
0
投稿

猜你喜欢

  • 关于Python 常用获取元素 Driver 总结

    2022-12-24 05:03:28

  • sql server如何利用开窗函数over()进行分组统计

    2024-01-16 01:55:36

  • python itchat给指定联系人发消息的方法

    2023-02-10 18:21:36

  • 使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法

    2024-05-13 09:29:36

  • 收藏整理的一些Python常用方法和技巧

    2023-01-04 10:42:38

  • linux 下python多线程递归复制文件夹及文件夹中的文件

    2021-06-28 03:27:44

  • python pygame 愤怒的小鸟游戏示例代码

    2023-11-14 17:00:48

  • python实现递归查找某个路径下所有文件中的中文字符

    2021-12-11 09:13:18

  • Python基础之画图神器matplotlib

    2022-03-03 23:34:02

  • python 从远程服务器下载日志文件的程序

    2021-03-06 01:39:15

  • Golang的继承模拟实例

    2024-05-08 10:23:14

  • Python with用法实例

    2022-09-07 19:34:05

  • OAuth 2.0授权协议详解

    2023-06-15 03:54:43

  • Go语言使用MySql的方法

    2024-01-20 04:09:25

  • Smush it - 一款图片压缩的Firefox插件，很好，很强大！

    2009-04-12 20:09:00

  • python使用Matplotlib画条形图

    2023-09-04 06:30:50

  • MySQL实现字符串的拼接,截取,替换,查找位置的操作

    2024-01-13 13:17:22

  • golang切片扩容规则实现

    2024-04-27 15:31:22

  • 软件测试实现Finddler的手机抓包过程

    2023-12-27 03:36:40

  • Golang并发编程之调度器初始化详解

    2023-07-13 08:47:11
    • asp之家 网络编程 m.aspxhome.com