jQuery password strength checker
Solution 1
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 pass = "f00Bar!";
var strength = 1;
var arr = [/.{5,}/, /[a-z]+/, /[0-9]+/, /[A-Z]+/];
jQuery.map(arr, function(regexp) {
if(pass.match(regexp))
strength++;
});
(Modified to correct syntax errors.)
Solution 2
I would suggest evaluating an existing jQuery password strength plugin. (unless your just doing it as an exercise)
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/
Solution 3
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')});
});
Solution 4
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.
Solution 5
function strengthResult(p) {
if(p.length<6 || p.length>18) {
return 'Passwords must be 6-18 characters';
}
var strength = checkStrength(p);
switch(true) {
case strength<=30:
return 'Password "'+p+'" ('+strength+') is Very Weak';
break;
case strength>30 && strength<=35:
return 'Password "'+p+'" ('+strength+') is Weak';
break;
case strength>35 && strength<=50:
return 'Password "'+p+'" ('+strength+') is below Average';
break;
case strength>50 && strength<=60:
return 'Password "'+p+'" ('+strength+') is almost Good';
break;
case strength>60 && strength<=70:
return 'Password "'+p+'" ('+strength+') is Good';
break;
case strength>70 && strength<=80:
return 'Password "'+p+'" ('+strength+') is Very Good';
break;
case strength>80 && strength<=90:
return 'Password "'+p+'" ('+strength+') is Strong';
break;
case strength>90 && strength<=100:
return 'Password "'+p+'" ('+strength+') is Very Strong';
break;
default:
return 'Error';
}
}
function strengthMap(w,arr) {
var c = 0;
var sum = 0;
newArray = arr.map(function(i) {
i = c;
//sum += w-2*i;
sum += w;
c++;
return sum;
});
return newArray[c-1];
}
function checkStrength(p){
var weight;
var extra;
switch(true) {
case p.length<6:
return false;
break;
case p.length>18:
return false;
break;
case p.length>=6 && p.length<=10:
weight = 7;
extra = 4;
break;
case p.length>10 && p.length<=14:
weight = 6;
extra = 3;
break;
case p.length>14 && p.length<=18:
weight = 5;
extra = 2.5;
break;
}
allDigits = p.replace( /\D+/g, '');
allLower = p.replace( /[^a-z]/g, '' );
allUpper = p.replace( /[^A-Z]/g, '' );
allSpecial = p.replace( /[^\W]/g, '' );
if(allDigits && typeof allDigits!=='undefined') {
dgtArray = Array.from(new Set(allDigits.split('')));
dgtStrength = strengthMap(weight,dgtArray);
} else {
dgtStrength = 0;
}
if(allLower && typeof allLower!=='undefined') {
lowArray = Array.from(new Set(allLower.split('')));
lowStrength = strengthMap(weight,lowArray);
} else {
lowStrength = 0;
}
if(allUpper && typeof allUpper!=='undefined') {
upArray = Array.from(new Set(allUpper.split('')));
upStrength = strengthMap(weight,upArray);
} else {
upStrength = 0;
}
if(allSpecial && typeof allSpecial!=='undefined') {
splArray = Array.from(new Set(allSpecial.split('')));
splStrength = strengthMap(weight,splArray);
} else {
splStrength = 0;
}
strength = dgtStrength+lowStrength+upStrength+splStrength;
if(dgtArray.length>0){
strength = strength + extra;
}
if(splStrength.length>0){
strength = strength + extra;
}
if(p.length>=6){
strength = strength + extra;
}
if(lowArray.length>0 && upArray.length>0){
strength = strength + extra;
}
return strength;
}
console.log(strengthResult('5@aKw1'));
console.log(strengthResult('5@aKw13'));
console.log(strengthResult('5@aKw13e'));
console.log(strengthResult('5@aKw13eE'));
console.log(strengthResult('5@aKw13eE!'));
console.log(strengthResult('5@aKw13eE!,'));
console.log(strengthResult('5@aKw13eE!,4'));
console.log(strengthResult('5@aKw13eE!,4D'));
console.log(strengthResult('5@aKw13eE!,4Dq'));
console.log(strengthResult('5@aKw13eE!,4DqJ'));
console.log(strengthResult('5@aKw13eE!,4DqJi'));
console.log(strengthResult('5@aKw13eE!,4DqJi#'));
console.log(strengthResult('5@aKw13eE!,4DqJi#7'));
console.log(strengthResult('5@aKw13eE!,4DqJJ#7'));
console.log(strengthResult('5@aKw33eE!,4DqJJ#7'));
console.log(strengthResult('111111'));
console.log(strengthResult('1111111'));
console.log(strengthResult('11111111'));
console.log(strengthResult('111111111'));
console.log(strengthResult('1111111111'));
console.log(strengthResult('11111111111'));
console.log(strengthResult('111111111111'));
console.log(strengthResult('1111111111111'));
console.log(strengthResult('11111111111111'));
console.log(strengthResult('111111111111111'));
console.log(strengthResult('1111111111111111'));
console.log(strengthResult('11111111111111111'));
console.log(strengthResult('111111111111111111'));
console.log(strengthResult('5@aKw33eE!,4DqJJ#71'));
console.log(strengthResult('11111'));
Evernoob
Web developer. I mainly like working in front-end: HTML, CSS, Javascript. Also use a lot of PHP, CodeIgniter, MySQL and Doctrine2.
Updated on November 07, 2021Comments
-
Evernoob over 2 years
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); }); });