How to Check Password Strength with JQuery

    Feb 10, 2016       by Pankaj Kumar
password-strength-check-jquery.jpg

Hey there, Today we will create a demo(Javascript sample application) to check the strengh of the password with jquery. Today in almost in every application we can see the password strengh checker while setting new password. With jquery we can easily perform the task. 

 

Using jquery Complexify plugin we can easily add password strength meter with our password field and it’ll show complexity of the password in % with bar, so that user can easily choose more strong password.

 

Let's proceed for the intigration.

 

Below are the library needed for our demo:

 
<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>
 

 

And  HTML code is as:

 

 
<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>
 

 

At the bottom of the page we have javascript code to perform the actual task of the demo.

 

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

 

By following these steps our demo is done.

That’s all for now . Thank you for reading and I hope this demo(Javascript Sample Application) will be very helpful for chekcing password strength with javascript/jquery.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

 

You can download complete code from here. Download Code

jquery demo password strength checker

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS