最近正在用功的学习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]")能抓到想要的东西。
分享到：
相关推荐
标题中的“密码强度检测（jquery）.rar”表明这是一个基于jQuery的密码强度检测工具的压缩包文件。在网页开发中，密码强度检测是确保用户创建安全密码的重要环节，它可以指导用户创建复杂度足够、不易被猜解的密码，...
**jQuery密码强度智能检测表单** 是一个基于流行的JavaScript库jQuery设计的前端验证工具，用于帮助用户创建更安全的密码。这个工具通过实时评估输入的密码，并根据其复杂度将其分为弱、中、强三个等级，以此来提高...
总的来说，"jquery验证密码强度"是关于使用jQuery和可能的辅助工具或插件来实现密码输入的实时强度验证，以提高用户密码的安全性。这个功能通常涉及JavaScript编程、正则表达式以及与用户界面的交互。
"基于jQuery实现的密码强度正则表达式源码.zip"是一个专注于密码验证的前端代码资源，它利用JavaScript库jQuery来检测用户输入的密码强度，并通过正则表达式进行复杂的规则匹配。 首先，jQuery是一个广泛使用的...
例如，可以通过修改 `jquery.passwordStrength.js` 中的源码来添加或调整密码强度检查的规则。此外，可以自定义 CSS 样式来自定义视觉反馈。 7. **交互提示**： 为了提高用户体验，还可以结合提示信息，当用户输入...
"jQuery插件密码强弱"是指利用jQuery扩展功能来实现对用户输入密码强度的评估。这样的插件对于提升用户体验和增强网站安全性至关重要，因为它可以帮助用户创建更强大、更难破解的密码。 首先，我们来了解一下密码...
jQuery可以方便地实现客户端验证，例如手机号码格式检查、密码强度检测等。通过添加特定的类或数据属性，我们可以为输入框绑定验证规则，并在用户输入时实时反馈错误信息，提高用户体验。 此外，动画效果也是提升...
passwordStrength: "密码强度不够" } } }); ``` ### 六、验证事件与方法 jQuery Validate还提供了丰富的事件和方法，如`submitHandler`（验证成功后的处理函数）、`invalidHandler`（验证失败的处理函数），...
在用户注册过程中，通常需要对输入的数据进行验证，例如邮箱格式、密码强度等。ASP.NET提供了一些内置验证控件，如RequiredFieldValidator、RegularExpressionValidator等，可以轻松实现这些验证。 5. **异步注册...
通常，这种校验js会用于表单验证，例如检查用户输入的有效性，如电子邮件格式、密码强度、电话号码格式等。博文链接指向了iteye.com的一个博客文章，遗憾的是，由于我们无法直接访问该链接，所以无法获取更多详细...
例如，表单验证是JS验证的常见应用场景，包括邮箱格式验证、手机号码验证、密码强度验证等。 在给定的描述中提到的博客链接（已失效）可能包含了一些关于JS验证的具体实现方法或者案例分析。遗憾的是，由于链接无法...
这些条件可能包括数据类型（如数字、日期或电子邮件地址）、长度限制、格式规范（如密码强度）等。验证通常发生在客户端（浏览器端）和/或服务器端，以提高用户体验并增强数据安全。 二、客户端验证 1. JavaScript...
5. **表单验证**：针对用户在表单中输入的数据进行验证，例如邮箱格式、电话号码、密码强度等。 6. **正则表达式**：用于复杂的数据匹配和验证，例如验证用户名、密码、邮箱等是否符合特定规则。 7. **AJAX**：...
5. **自定义函数验证**：编写特定的验证函数，根据业务需求进行复杂判断，例如验证密码强度。 在Web开发中，我们还需要了解一些与JavaScript交互相关的工具和概念： 1. **jQuery库**：简化DOM操作，提供动画效果和...
在网页表单中，JavaScript验证是必不可少的，它可以在用户提交数据之前检测输入是否符合预设规则，如邮箱格式、手机号码格式、密码强度等。通过这种方式，可以减少服务器的负载，因为错误的请求在到达服务器前就被...
- `zxcvbn` 库可以评估密码强度并给出评分。 10. **表单验证**： - 使用 `HTML5` 的内置验证属性，如 `required`、`min`、`max` 等。 - `addEventListener('submit', validateForm)` 监听表单提交事件，自定义...
通过获取输入值并进行条件判断，我们可以确保用户输入符合特定格式或规则，如邮箱格式验证、密码强度检查等。 5. **AJAX提交**：为了提升用户体验，可以使用JavaScript的XMLHttpRequest对象或更现代的fetch API来...
7. **表单验证**：JavaScript可用于验证用户输入，确保数据的正确性和安全性，如邮箱格式检查、密码强度检测等。 8. **响应式设计**：JavaScript配合库如jQuery或现代的Intersection Observer API，实现跨设备的...