jQuery password strength checker

Question

I'm quite new to jQuery, and I've written a simple function to check the strength of a password for each keypress.

The idea is that every time a user enters a character, the contents is evaluated to test the strengh of the password they have entered... I'm sure everyone has seen these before.

Anyhow, the logic I have used is that no password begins with a value of 1. When a lower-case character is used, the score increments to 2. When a digit is used the score increments by 1 again, same for when an uppercase character is used and when the password becomes 5 or more characters long.

What is returned is the strength of the password so far as a value from 1 to 5 every time a key is pressed.

So, about my question. The way that I've done it doesn't seem very jQuery like... almost like I may as well have just done straight javascript. Also I was wondering about my logic. Have I done anything done or overlooked something? Any suggestions from smarter people than myself?

Any suggestions or advice would be appreciated.

$(document).ready(function(){

  $("#pass_strength").keyup(function() {

   var strength = 1;

   /*length 5 characters or more*/
   if(this.value.length >= 5) {
    strength++;
   }

   /*contains lowercase characters*/
   if(this.value.match(/[a-z]+/)) {
    strength++;
   }

   /*contains digits*/
   if(this.value.match(/[0-9]+/)) {
    strength++;
   }

   /*contains uppercase characters*/
   if(this.value.match(/[A-Z]+/)) {
    strength++;
   }

   alert(strength);
  });
  });

Answer 1

• The length of the password should be at least 8 characters.
• The strength increases with the length, a longer password should have more points.
• Include special characters like #/" and the like. (Or just any other than [a-Z0-9])
• For really long passwords this method could get slow. Why don't you just test every new character and use a dictionary for which features the password already has.

Answer 2

I would suggest evaluating an existing jquery password strength plugin. (unless your just doing it as an exersize)

Here are a few links I found:

http://www.visual-blast.com/javascript/password-strength-checker/

http://phiras.wordpress.com/2007/04/08/password-strength-meter-a-jquery-plugin/

http://benjaminsterling.com/?p=117

Answer 3

On top of gs' answer, you should check the password against common dictionary words (using a hash, probably). Otherwise a weak password like 'Yellow1' will be evaluated as strong by your logic.

Answer 4

The best way is to take an existing plugin as TJB suggested.

As to your question about the code itself, a nicer way is to write it like that:

var strength = 1;
var arr = [/{5,}/, /[a-z]+/, /[0-9]+/, /[A-Z]+/];
jQuery.each(arr, function(i, regexp) {
  if(this.value.match(regexp))
     strength++;
}

Answer 5

You can try the jQuery plugins for password strength check

Some of them are

Password Strength Meter

Password Strength Indicator

Answer 6

If you are doing as excersie

Reference: Password Strength Indicator

jQuery Code Used (# denotes what have changed from Benjamin's code)

$.fn.passwordStrength = function( options ){
return this.each(function(){
 var that = this;that.opts = {};
 that.opts = $.extend({}, $.fn.passwordStrength.defaults, options);

 that.div = $(that.opts.targetDiv);
 that.defaultClass = that.div.attr('class');

 that.percents = (that.opts.classes.length) ? 100 / that.opts.classes.length : 100;

 v = $(this)
 .keyup(function(){
  if( typeof el == "undefined" )
  this.el = $(this);
  var s = getPasswordStrength (this.value);
  var p = this.percents;
  var t = Math.floor( s / p );

  if( 100 <= s )
  t = this.opts.classes.length - 1;

  this.div
  .removeAttr('class')
  .addClass( this.defaultClass )
  .addClass( this.opts.classes[ t ] );
 })
 # Removed generate password button creation
});

function getPasswordStrength(H){
 var D=(H.length);

 # Added below to make all passwords less than 4 characters show as weak
 if (D<4) { D=0 }


 if(D>5){
  D=5
 }
 var F=H.replace(/[0-9]/g,"");
 var G=(H.length-F.length);
 if(G>3){G=3}
 var A=H.replace(/\W/g,"");
 var C=(H.length-A.length);
 if(C>3){C=3}
 var B=H.replace(/[A-Z]/g,"");
 var I=(H.length-B.length);
 if(I>3){I=3}
 var E=((D*10)-20)+(G*10)+(C*15)+(I*10);
 if(E<0){E=0}
 if(E>100){E=100}
 return E
}


# Removed generate password function
};

$(document)
.ready(function(){
$('input[name="password2"]').passwordStrength({targetDiv: '#iSM',classes : Array('weak','medium','strong')});

});