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         <!-- custom select plugin js -->
 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>