jQuery password strength checker

The demo proposed in this post shows a basic password strength checker built with jQuery. First, let's add some CSS styles to a simple form that contains only a password field and a submit button:

form {
 margin: 0;
 padding: 0;
 font: 76% Verdana, sans-serif;
 color: #333;
 border: 3px solid #ddd;
 width: 60%;
}

form input {
 font: 1em Verdana, sans-serif;
}

form ul {
 margin: 0 auto;
 padding: 1em 0;
 width: 85%;
 list-style: none;
}

form li {
 height: 100%;
 margin-bottom: 0.5em;
 padding-bottom: 2px;
 border-bottom: 1px dashed #ccc;
 overflow: hidden;
}

form li label {
 width: 7em;
 float: left;
 display: block;
 padding-right: 0.4em;
 font-weight: bold;
 color: #666;
}

form li input {
 float: left;
 display: block;
 width: 150px;
 border: 1px solid #666;
}

form p {
 margin: 0 auto;
 width: 85%;
 padding: 5px 0;
}

form p input {
 background: #666;
 color: #fff;
 font-weight: bold;
 border-color: #ddd;
}

div.message {
    float: left;
    padding-left: 0.3em;
    height: 100%;
    font-weight: bold;
    color: #393;
}

#password-checker {
 clear: both;
 height: 100%;
 padding: 4px 0 4px 7.2em;
 color: green;
}

#password-level {
 width: 130px;
 height: 12px;
 border: 1px solid #666;
 margin-top: 4px;
}

span.level {
  width: 13px;
  height: 12px;
  background: #fff;
  float: left;
}

span.mark {
   color: #393;
}


div.low {
 color: red;
 padding: 4px 0;
}

div.medium {
 color: orange;
 padding: 4px 0 4px 52px;
}

div.high {
 color: green;
 padding: 4px 0 4px 91px;
}

The last seven CSS rules are actually those which we're going to use with jQuery. Here's the jQuery code:

$(document).ready(function() {

 var checker = $('<div id="password-checker"></div>').html('Password level' + '<div id="password-level"></div>');
       
 checker.insertAfter('input[type=password]');
 
 
 $('#login-form').find('input[type=password]').keyup(function(event) {
 
        $('<span class="level"></span>').appendTo('#password-level');
        if(event.keyCode == 8 || event.keyCode == 46) {
        
            $('span.level').remove();
            $('input[type=password]').attr('value', '');
            $('#password-checker div[class]').remove();
           
        }
        
        
        var low = $('<div class="low"></div>').text('Low');
        var medium = $('<div class="medium"></div>').text('Medium');
        var high = $('<div class="high"></div>').text('High');
        
        
        if($('span.level').size() <= 3) {
        
            $('span.level').css('background', 'red');
     
     if($('span.level').size() == 1) {
       low.appendTo('#password-checker');
     }
     
         }
  
  
  if($('span.level').size() > 3 && $('span.level').size() <= 6) {
  
  
      $('span.level').css('background', 'orange');
      $('#password-checker div.low').remove();
      
      if($('span.level').size() == 4) {
          medium.appendTo('#password-checker');
      }
  }
  
  if($('span.level').size() > 6 && $('span.level').size() <= 10) {
  
  
      $('span.level').css('background', 'green');
      $('#password-checker div.medium').remove();
      
      if($('span.level').size() == 7) {
          high.appendTo('#password-checker');
      }
      
      
  }
     
     
        if($('span.level').size() == 10) {
        
            $('input[type=password]').attr('maxlength', 10);
     $('#password-checker').html('Maximum length: 10 characters');
     
         }
  
  
 
 });
    




});

Our password checker is basically made up of two components: a message in different colors and a series of span elements with different background colors. Each time an user press a key, we calculate the length of the spans array and we change our message accordingly. If an user presses the Delete or Backspace key, everything is reset to the default values, that is, no messages and no spans. You can see the final result here.

Note

At the time of this writing, this demo doesn't work in all versions of Internet Explorer. If you have some suggestions, please let me know.