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> </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的属性,可以让盲人的读屏器工作容易。另外,把每个表单的提交按钮的颜色和其它按钮的颜色区分开,也可以增加网页的可读性。
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 问题: 在Python爬虫的过程中经常要模拟UserAgent, 因此自动生成UserAgent十分有用, 最近看到一个Python库(fa
- 一、vue3的介绍(一)vue3的简介2020年9月18日发布3.0版本。代号海贼王(One piece)其中耗时两年多、2600次提交、3
- 人脸识别正在成为软件开发中的一种趋势。它有助于识别人脸并使应用程序更加健壮。在本教程中,我们将使用python和face_recogniti
- ASP 本身不支持动态包含文件,现在的动态包含是通过 FSO 把被包含的文件合并到主文件里再运行。以下也有把形如 <!--#
- "神经衰弱"翻牌游戏考察玩家的记忆力,游戏的开头会短时间给你看一小部分牌的图案,当玩家翻开两张相同图案牌的时候,会消除,
- 本文实例讲述了Python队列RabbitMQ 使用方法。分享给大家供大家参考,具体如下:目前的exchange的路由策略是:每个需要队列的
- 前几天有一个需求,透视表中的年级这一列要按照一年级,二年级这样的序列进行排序,但是用过透视表的人都知道,透视表对中文的排序不是太理想,放弃p
- 问题用过 tensorflow 的人都知道, tf 可以限制程序在 GPU 中的使用效率,但 pytorch 中没有这个操作。思路于是我想到
- python提高图像质量概述调研了一些提高图像质量的方式深度学习方法,如微软的Bringing-Old-Photos-Back-to-Lif
- MGR全称MySQL Group Replication(Mysql组复制),是MySQL官方于2016年12月推出的一个全新的高可用与高扩
- 由于办公需要“每天定时推送某消息用来提醒群里面所有人”,有同事提议用企业微信自带的机器人来实现此功能。我觉得企业微信的这个工具还不错,具体使
- 结合网上的资料,自己亲自的去安装了一次MySQL,安装版本是win7x64 5.7.16。在安装过程中出现并解决了如下问题:“mysql 服
- 往期学习:python数据类型: python数据结构:数据类型.python的输入输出: python数据结构之输入输出及控制和异常.py
- 1、基本概念K近邻法(K-nearest neighbors,KNN)既可以分类,也可以回归。KNN做回归和分类的区别在于最后预测时的决策方
- 在利用Python进行系统管理的时候,特别是同时操作多个文件目录,或者远程控制多台主机,并行操作可以节约大量的时间。当 * 作对象数目不大时,
- body {font-family: Arial, sans-serif; }这是我迄今
- 本文实例讲述了python实现获取单向链表倒数第k个结点的值。分享给大家供大家参考,具体如下:#初始化链表的结点class Node():
- 在python中,我们定义好一个字符串,如下所示。在python中定义个字符串然后把它赋值给一个变量。我们可以通过下标访问单个的字符,跟所有
- pip镜像源在国内如果不使用 VPN 是没办法好好使用 pip 命令安装任何 Python 包的。所以另一个选择就是使用国内各大厂的开源镜像
- 本文实例讲述了windows下Python实现将pdf文件转化为png格式图片的方法。分享给大家供大家参考,具体如下:最近工作中需要把pdf