几个jquery验证密码强度的插件

时间：2022-11-28 13:44:09
 

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

从这里下载 jquery.pstrength.js 强度验证插件！然后在网页中引用jquery文件和这个插件

XML/HTML代码
  1. <script src="/js/jquery.js" type="text/javascript"></script>      
  2. <script type="text/javascript" src="/js/jquery.pstrength.js"></script>   

然后使用以下函数

JavaScript代码
  1. jQuery(document).ready(function(){       
  2.       jQuery('#password1').pstrength();     
  3. });    

#password是你的密码框ID

根据你的情况不同，你可以自定义你的密码强度，我定义的是这样的
 

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

 效果如下：

几个jquery验证密码强度的插件


2.

jQuery密码强度检验插件

几个jquery验证密码强度的插件

一款不错的密码强度插件！

1 jquery.pstrength插件和jquery文件

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

  1. <script type="text/javascript" src="js/jquery.js"></script> 
  2. <script type="text/javascript" src="js/jquery.pstrength-min.1.2.js">
  3. </script>
  4. <script type="text/javascript">
  5. $(function() {
  6. $('#user_password').pstrength();
  7. });
  8. </script>

3 HTML加入密码输入框，id=”user_password”:

  1. 密码：<input type="password" id="user_password" name="user_password" />

4 css:

  1. .pstrength-minchar {
  2. font-size : 10px;
  3. }
  4. input {
  5. width:180px;
  6. height:12px;
  7. line-height:12px;
  8. padding:4px 0px;
  9. border: #cfcfcf 1px solid;
  10. color: #585858;
  11. }

演示地址

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


3.

用jquery写了一个简单的密码强度测试工具

最近正在用功的学习jQuery，在琢磨了不少别人写的功能之后，也开始尝试着自己开发一些功能。今天我做了一个简单的密码强度测试工具。

这可功能的作用可以看下面这个截图。我已经在多种浏览器中测试过它了。

几个jquery验证密码强度的插件

闲话不提，上代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>无标题文档</title>  
  6. <script type="text/javascript" src="common/xheditor/jquery-1.3.2.min.js"></script>  
  7. <script type="text/javascript" src="jquery.popbox.js"></script>  
  8. <script type="text/javascript">  
  9. $(document).ready(function(){  
  10. $("form:eq(0) input:eq(0)").focus();  
  11. $("input[type=password][name=password1]").focus(function(){  
  12. var position=$(this).offset()  
  13. var $pwStrength=$('<div id="pwStrength"></div>').appendTo("body");  
  14. $pwStrength.css({"position":"absolute","width":120,"height":12,"left":position.left,"top":position.top+28,"background":"#FFFF80","fontSize":"10px","line-height":"12px","color":"#ffffff"});  
  15. $('<span>弱</span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#ff0000","position":"absolute","padding-left":"14px"}).appendTo($pwStrength);  
  16. $('<span>中</span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#FF9900","position":"absolute","padding-left":"54px"}).appendTo($pwStrength);  
  17. $('<span>强</span>').css({"width":26,"height":12,"display":"none","flowover":"hidden","background":"#008000","position":"absolute","padding-left":"94px"}).appendTo($pwStrength);  
  18. $('<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);  
  19. })  
  20. .keyup(function(){var pwd=$(this).val();$("#pwStrength span:lt(3)").css({"display":"none"});  
  21. 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;}  
  22. var bitTotal=function(num){modes=0;for (i=0;i<5;i++){if(num & 1) modes++;num>>>=1;}return modes;}  
  23. 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);}  
  24. 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"});}})  
  25. .blur(function(){$("#pwStrength").remove()});  
  26. })  
  27. </script>  
  28. <style type="text/css">  
  29. body{font-size:12px;line-height:20px;text-align:left;}  
  30. th{text-align:right;color:#336688;font-weight:normal;}  
  31. 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;}  
  32. 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;}  
  33. 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;}  
  34. </style>  
  35. </head>  
  36. <body>  
  37. <form>  
  38. <table border="0" cellpadding="3" cellspacing="0">  
  39. <tr><th><label for="username">请输入用户名</label></th><td>  
  40. <input type="text" name="username" size="19" maxlength="16"/></td></tr>  
  41. <tr><th><label for="password1">请输入密码</label></th><td>  
  42. <input type="password" name="password1" value="" size="19" maxlength="18" /></td></tr>  
  43. <tr><th><label for="password2">请再次输入密码</label></th><td>  
  44. <input type="password" name="password2" value="" size="19" maxlength="18" /></td></tr>  
  45. <tr><th>&nbsp;</th><td><button type="submit" class="submit">提交</button> <button type="reset">重置</button></td></tr>  
  46. </table>  
  47. </form>  
  48. </body>  
  49. </html>  

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

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

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

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

标签：

相关文章