We can use JavaScript regular expressions together with jQuery to create a simple plugin that checks the strength of a user-defined password. The concept behind is quite simple: every time a user types a character in the input field, the value inserted is compared against the corresponding regular expression. Passwords can be medium, weak or strong in terms of strength. Strength doesn't depend on the number of characters inserted, but on the combination of letters, digits and special characters. Let's see the details.
The following plugin allows you to choose the regular expressions to be used, the text messages for each level of strength and the CSS styles associated with them:
(function($) {
$.fn.passwordStrength = function(options) {
var that = this;
if(!that.is(':password')) {
throw new Error('Element not supported');
return;
}
var settings = {
regexes: {
medium: /^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$/g,
strong: /^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$/g
},
target: $('#passstrength'),
messages: {
medium: 'Medium',
strong: 'Strong',
weak: 'Weak'
},
styles: {
medium: {color: '#800'},
strong: {color: '#080'},
weak: {color: '#c00'}
}
};
options = $.extend(settings, options);
return that.each(function() {
$(this).keyup(function(e) {
if(options.regexes.strong.test($(this).val())) {
options.target.html(options.messages.strong).css(options.styles.strong);
} else if(options.regexes.medium.test($(this).val())) {
options.target.html(options.messages.medium).css(options.styles.medium);
} else {
options.target.html(options.messages.weak).css(options.styles.weak);
}
return true;
});
});
};
})(jQuery);
You can use this plugin only on password input fields, as follows:
$(function() {
$('#pass').passwordStrength();
});
The target option is the HTML element used to display the messages. You can see a demo below.
Demo
Live demo (on jsFiddle)