How to create password strength meter using jquery Complexify plugin

In this post we are going to learn how to create password strength meter using jquery Complexify plugin, Here we’ll use this plugin to check complexity of password entered by user, It is good idea when people are going to register on your website then create a automated system program to help identify user that they are choosing strong password for their new account so that no one can guess the password easily.



Using jquery Complexify plugin you can easily add password strength meter with your password field and it’ll show complexity of the password in % with bar, so that user can easily choose more strong password.
password-strength-checker
Here is integration.
Add required jquery libraries on page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.complexify.min.js"></script>

Sample HTML

Enter Storng Password: 
<input type="password" id="pass"><br/>
<progress value="0" max="100" id="pg"></progress> <span id="cpx">0%</span>



Finally put javascript on page to make it actionable.
Javascript

<script type="text/javascript">
$(function(){
$("#pass").complexify({}, function(valid, complexity){
    //console.log("Password complexity: " + Math.round(complexity));
    $("#pg").val(Math.round(complexity));
    $("#cpx").html(Math.round(complexity)+'%');
  });
});
</script>

See live demo and download source code..

DEMO

DOWNLOAD

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.