JQuery实现密码强度验证_建站学-个人建站指南,网页制作,网站设计,网站制作教程

密码强度验证的方式有很多，今天给大家推荐一个通过JQuery实现的密码强度验证控件，只需要很少的代码便能实现。

因为是基于JQuery的控件，当然需要JQuery库，还要一个本控件的JS。JQuery的JS大家可以到官网下载：http://code.jquery.com/jquery-1.4.2.min.js

这个控件的JS文件：password_strength_plugin.js

password_strength_plugin.js

  1 (function($){
  2     $.fn.shortPass = 'Too short';
  3     $.fn.badPass = 'Weak';
  4     $.fn.goodPass = 'Good';
  5     $.fn.strongPass = 'Strong';
  6     $.fn.samePassword = 'Username and Password identical.';
  7     $.fn.resultStyle = "";
  8
  9      $.fn.passStrength = function(options) {
10
11          var defaults = {
12                 shortPass:         "shortPass",    //optional
13                 badPass:        "badPass",        //optional
14                 goodPass:        "goodPass",        //optional
15                 strongPass:        "strongPass",    //optional
16                 baseStyle:        "testresult",    //optional
17                 userid:            "",                //required override
18                 messageloc:        1                //before == 0 or after == 1
19             };
20              var opts = $.extend(defaults, options);
21
22              return this.each(function() {
23                   var obj = $(this);
24
25                  $(obj).unbind().keyup(function()
26                  {
27
28                     var results = $.fn.teststrength($(this).val(),$(opts.userid).val(),opts);
29
30                     if(opts.messageloc === 1)
31                     {
32                         $(this).next("." + opts.baseStyle).remove();
33                         $(this).after("<span class=\""+opts.baseStyle+"\"><span></span></span>");
34                         $(this).next("." + opts.baseStyle).addClass($(this).resultStyle).find("span").text(results);
35                     }
36                     else
37                     {
38                         $(this).prev("." + opts.baseStyle).remove();
39                         $(this).before("<span class=\""+opts.baseStyle+"\"><span></span></span>");
40                         $(this).prev("." + opts.baseStyle).addClass($(this).resultStyle).find("span").text(results);
41                     }
42                   });
43
44                  //FUNCTIONS
45                  $.fn.teststrength = function(password,username,option){
46                           var score = 0;
47
48                          //password < 4
49                          if (password.length < 4 ) { this.resultStyle =  option.shortPass;return $(this).shortPass; }
50
51                          //password == user name
52                          if (password.toLowerCase()==username.toLowerCase()){this.resultStyle = option.badPass;return $(this).samePassword;}
53
54                          //password length
55                          score += password.length * 4;
56                          score += ( $.fn.checkRepetition(1,password).length - password.length ) * 1;
57                          score += ( $.fn.checkRepetition(2,password).length - password.length ) * 1;
58                          score += ( $.fn.checkRepetition(3,password).length - password.length ) * 1;
59                          score += ( $.fn.checkRepetition(4,password).length - password.length ) * 1;
60
61                          //password has 3 numbers
62                          if (password.match(/(.*[0-9].*[0-9].*[0-9])/)){ score += 5;}
63
64                          //password has 2 symbols
65                          if (password.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)){ score += 5 ;}
66
67                          //password has Upper and Lower chars
68                          if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)){  score += 10;}
69
70                          //password has number and chars
71                          if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)){  score += 15;}
72                          //
73                          //password has number and symbol
74                          if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([0-9])/)){  score += 15;}
75
76                          //password has char and symbol
77                          if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([a-zA-Z])/)){score += 15;}
78
79                          //password is just a numbers or chars
80                          if (password.match(/^\w+$/) || password.match(/^\d+$/) ){ score -= 10;}
81
82                          //verifying 0 < score < 100
83                          if ( score < 0 ){score = 0;}
84                          if ( score > 100 ){  score = 100;}
85
86                          if (score < 34 ){ this.resultStyle = option.badPass; return $(this).badPass;}
87                          if (score < 68 ){ this.resultStyle = option.goodPass;return $(this).goodPass;}
88
89                         this.resultStyle= option.strongPass;
90                          return $(this).strongPass;
91
92                  };
93
94           });
95      };
96 })(jQuery);
97
98
99 $.fn.checkRepetition = function(pLen,str) {
100      var res = "";
101      for (var i=0; i<str.length ; i++ )
102      {
103          var repeated=true;
104
105          for (var j=0;j < pLen && (j+i+pLen) < str.length;j++){
106              repeated=repeated && (str.charAt(j+i)==str.charAt(j+i+pLen));
107              }
108          if (j<pLen){repeated=false;}
109          if (repeated) {
110              i+=pLen-1;
111              repeated=false;
112          }
113          else {
114              res+=str.charAt(i);
115          }
116      }
117      return res;
118     };
119

这个控件的css文件：

style.css

  1 td label{
  2     font-size:14px;
  3     font-weight:bold;
  4     color:#666;
  5     font-family: arail,helvetica,san-serif;
  6 }
  7 input{
  8     height:28px;
  9     width:200px;
10     border:1px solid #ccc;
11     font-size:16px;
12     font-weight: bold;
13     color:#666;
14     padding:7px 0 0 4px;
15 }
16
17 /*  ADVANCED STYLES */
18 .top_testresult{
19     font-weight: bold;
20     font-size:13px;
21     font-family: arail,helvetica,san-serif;
22     color:#666;
23     padding:0;
24     margin:0 0 2px 0;
25 }
26 .top_testresult span{
27     padding:6px ;
28     margin:0;
29 }
30 .top_shortPass{
31     background:#edabab;
32     border:1px solid #bc0000;
33     display:block;
34 }
35 .top_shortPass span{
36
37 }
38 .top_badPass{
39     background:#edabab;
40     border:1px solid #bc0000;
41     display:block;
42 }
43 .top_badPass span{
44
45 }
46 .top_goodPass{
47     background:#ede3ab;
48     border:1px solid #bc9f00;
49     display:block;
50 }
51 .top_goodPass span{
52
53 }
54 .top_strongPass{
55     background:#d3edab;
56     border:1px solid #73bc00;
57     display:block;
58 }
59 .top_strongPass span{
60
61 }
62
63
64 /*     RESULT STYLE  */
65 .testresult{
66     font-weight: bold;
67     font-size:13px;
68     font-family: arial,helvetica,san-serif;
69     color:#666;
70     padding:0px 0px 12px 10px;
71     margin-left:10px;
72     display: block;
73     height:28px;
74     float:left;
75 }
76 .testresult span{
77     padding:10px 20px 12px 10px;
78     margin: 0px 0px 0px 20px;
79     display:block;
80     float:right;
81     white-space: nowrap;
82 }
83 .shortPass{
84     background:url(../images/red.png) no-repeat 0 0;
85 }
86 .shortPass span{
87     background:url(../images/red.png) no-repeat top right;
88 }
89 .badPass{
90     background:url(../images/red.png) no-repeat 0 0;
91 }
92 .badPass span{
93     background:url(../images/red.png) no-repeat top right;
94 }
95 .goodPass{
96     background:url(../images/yellow.png) no-repeat 0 0;
97 }
98 .goodPass span{
99     background:url(../images/yellow.png) no-repeat top right;
100 }
101 .strongPass{
102     background:url(../images/green.png) no-repeat 0 0;
103 }
104 .strongPass span{
105     background:url(../images/green.png) no-repeat top right;
106 }
107

head部分代码

head

1  <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2         
3         <script type="text/javascript" src="js/password_strength_plugin.js"></script>
4         <link rel="stylesheet" type="text/css" href="css/style.css">
5
6         <script>
7             $(document).ready( function() {
8
9                 //BASIC
10                 $(".password_test").passStrength({
11                     userid:    "#user_id"
12                     });
13
14                 //ADVANCED
15                 $(".password_adv").passStrength({
16                     shortPass:         "top_shortPass",
17                     badPass:        "top_badPass",
18                     goodPass:        "top_goodPass",
19                     strongPass:        "top_strongPass",
20                     baseStyle:        "top_testresult",
21                     userid:            "#user_id_adv",
22                     messageloc:        0
23                 });
24             });
25         </script>

body部分代码

body

1 <table cellpadding="2" cellspacing="0" border="0">
2             <tr>
3                 <td align="right"><label>User Name:</label></td>
4                 <td><input type="text" name="user_name" id="user_id_adv"/></td>
5             </tr>
6             <tr>
7                 <td align="right"><label>Password:</label></td>
8                 <td><input type="password" name="pass_word" class="password_adv"/></td>
9             </tr>
10         </table>

最后把用到的图片资源打包给大家/Files/kyle_zhao/images.rar

(责任编辑：admin)

搜索

热门标签:

JQuery实现密码强度验证