Check Password Strength Tutorial Using Jquery

Many times we create very simple passwords without realizing the implications and the risks involved. By doing this, you are making your account very susceptible for hackers to hack your account. Therefore any website or application should have a proper Password Strength Checking system.

This tutorial ‘Check Password Strength Tutorial Using Jquery‘ will show you to create a password strength checker. You will be able to check the strength of the user’s inputted password and indicate whether it is weak or strong. Ultimately you can thus provide suggestions to make a stronger password.

 

Below is the step by step tutorial:

HTML

<form action="" method="post" class="checkPasswordMatch">
   <div class="setLabel">Password Strength Checker</div>
   <div><input type="password" id="pwd1" placeholder="Enter Your Password" class="pwd_fld"/></div>
   <div><input type="password" id="pwd2" placeholder="Re Enter Your Password" class="pwd_fld"/></div>
   <input type="checkbox" id="showHide"> <span class="showPass">Show Password? </span><br/>
   <div id="setPasswordMessage" style="display:none;"></div>
</form>

 

JAVASCRIPT

$(document).ready(function() {
    var pwd1 = $('#pwd1'); //id of first password field
    var pwd2 = $('#pwd2'); //id of second password field
    var pwdIdSet = $('#setPasswordMessage'); //id of indicator element

    setCheckPasswordStrength(pwd1, pwd2, pwdIdSet); //call password check function

});

function setCheckPasswordStrength(pwd1, pwd2, pwdIdSet) {
    /*=========== Start: Set Password Cretria Regular Expression ===================*/

    //Password must contain 5 or more characters
    var lowPassword = /(?=.{5,}).*/;

    //Password must contain at least one digit and lower case letters .
    var mediumPassword = /^(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/;

    //Password must contain at least one digit, one upper case letter and one lower case letter.
    var averagePassword = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])\S{5,}$/;

    //Password must contain at least one digit, one upper case letter and one lower case letter.
    var strongPassword = /^(?=\S*?[A-Z])(?=\S*?[a-z])(?=\S*?[0-9])(?=\S*?[^\w\*])\S{5,}$/;

    /*=========== End: Set Password Cretria Regular Expression ===================*/

    // test() method is used to test match in a string whether the value is matched in a string or not.

    $(pwd1).on('keyup', function(e) {
        document.getElementById("setPasswordMessage").style.display = "block";
        if (strongPassword.test(pwd1.val())) {
            pwdIdSet.removeClass().addClass('strongPassword').html("Very Strong! Please use this password!");
        } else if (averagePassword.test(pwd1.val())) {
            pwdIdSet.removeClass().addClass('averagePassword').html("Strong! Tips: Enter special chars to make even stronger");
        } else if (mediumPassword.test(pwd1.val())) {
            pwdIdSet.removeClass().addClass('mediumPassword').html("Good! Tips: Enter uppercase letter to make strong");
        } else if (lowPassword.test(pwd1.val())) {
            pwdIdSet.removeClass().addClass('stilllowPassword').html("Still Weak! Tips: Enter digits to make good password");
        } else {
            pwdIdSet.removeClass().addClass('lowPassword').html("Very Weak! Please use 5 or more chars password)");
        }
    });

    $(pwd2).on('keyup', function(e) {

        if (pwd1.val() !== pwd2.val()) {
            pwdIdSet.removeClass().addClass('lowPassword').html("Passwords do not match!");
        } else {
            pwdIdSet.removeClass().addClass('goodpass').html("Passwords match!");
        }

    });
}

$(document).ready(function () {
	$("#showHide").click(function () {
		if ($("#pwd1").attr("type")=="password") {
			$("#pwd1").attr("type", "text");
		}
		else{
			$("#pwd1").attr("type", "password");
		}

	});
});

CSS

body {
    background: url(TryCatchBackground.png);
}
.checkPasswordMatch {
    width: 400px;
    margin: auto;
    background: #ff9483;
    padding: 25px;
    border: 1px solid #ff9494;
    border-radius: 4px;
    margin-top: 10%;
}
.pwd_fld {
    width: 97.5%;
    height: 25px;
    margin: 5px;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    line-height: 25px;
    padding: 5px;
    font-size: 15px;
    color: #888;
}
#setPasswordMessage {
    width: 97.5%;
    height: 25px;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    color: #888;
    text-align: center;
    font: 12px/25px Lucida Bright;
}
#setPasswordMessage.lowPassword {
    border: 1px solid #FF9191;
    background: #FFC7C7;
    color: #94546E;
    margin: 5px 0 0 10px;
}
#setPasswordMessage.stilllowPassword {
    border: 1px solid #FBB;
    background: #FDD;
    color: #945870;
    margin: 5px 0 0 10px;
}
#setPasswordMessage.mediumPassword {
    border: 1px solid #C4EEC8;
    background: #E4FFE4;
    color: #51926E;
    margin: 5px 0 0 10px;
}
#setPasswordMessage.averagePassword {
    border: 1px solid #6ED66E;
    background: #79F079;
    color: #348F34;
}
#setPasswordMessage.strongPassword {
    border: 1px solid #379137;
    background: #48B448;
    color: #000;
    text-shadow: 1px 1px 1px #296429;
    margin: 5px 0 0 10px;
}
#setPasswordMessage.goodpass {
    border: 1px solid #379137;
    background: #48B448;
    color: #000;
    margin: 5px 0 0 10px;
}
.showPass {
    color: #000;
    font: 15px Lucida Bright;
}
#showHide {
    margin: 5px 0 0 5px;
}
.setLabel {
    color: #000;
    font: 21px Lucida Bright;
    padding: 0 0 15px;
    text-align: center;
}

 

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends becaus“You share, I share, let’s make the world aware”.

 

You may want to take a look at the following related posts:

 

Also for more awesome tutorials, please don’t forget to like our facebook page TryCatch Classes.

 

Bonus: We also give training on following topics:

                       1. PHP Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3.  Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.