jQuery password strength checker

user_162668 0
Viewed 58220

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);
        });
     });
logic passwords jquery javascript
15 Answers

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'));

user_78162740
user_5279780

Find complete code below:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery.complexify.min.js"></script>

HTML:

<div class="row">
<div class="col-md-4 col-md-offset-4">
<h4> Password strength check with jquery</h4>
<label>Enter Storng Password: </label>
<input type="password" id="pwd"><br/>
<progress style="margin-left:20%" value="0" max="100" id="pg"></progress> <span id="cpx">0%</span>
</div>

Script

$(function(){
$("#pwd").complexify({}, function(valid, complexity){
//console.log("Password complexity: " + Math.round(complexity));
$("#pg").val(Math.round(complexity));
$("#cpx").html(Math.round(complexity)+'%');
});
});

Please complete working source code here

user_84868460

I have found an good design with password validator plugin. let me explain the steps

here is the full code : https://lets-solve.com/jquery-password-validator/

  1. Create HTML file and place password and confirm password field field.

  1. load css

  2. load javascript

  1. Initialize the plugin

    var password_validator = new PasswordValidator();

Thats it, now password matcher will show error message if both passwords not match.

How to compare & validate password while submiting form/click on button?

var password_validator = new PasswordValidator();

// to check password criteria is matching, if yes than it will return true otherwise returns false var is_valid = password_validator.is_valid();

// to check both passwords are matching or not var is_match = password_validator.match_confirm_password();

user_45713330

implementation for scoring based on variation, mess and length:

function scorePass(pass) {  
    let score = 0;
    
    // variation range
    score += new Set(pass.split("")).size * 1;
    const charCodes = [...new Set(pass.split(''))].map(x=>x.toLowerCase().charCodeAt(0));

    // shuffle score - bonus for messing things up
    for (let i=1; i < charCodes.length;i++)
    {
        const dist = Math.abs(charCodes[i-1]-charCodes[i]);
        if (dist>60)
            score += 15;
        else if (dist>8)
            score += 10;
        else if (dist>1)
            score += 2;
    }
    
    // bonus for length
    score += (pass.length - 6) * 3;

    return parseInt(score);
}

abcעfדg94a > jefPYM583^ > abcABC!@#$

https://codepen.io/oriadam/pen/ExmaoYy

user_33566790
Related