Password Strength checker with jQuery Complexify

The main aim of jQuery Complexify plugin is to measure how complex is the user entered password and show the live feedback in the form of strength bars.

In this tutorial, I am using jQuery UI Progressbar widget to display the password strength according to the user input.

Password Strength checker with jQuery Complexify


Contents

  1. Download and include
  2. Initialize
  3. Options
  4. Conclusion

 


 

1. Download and include

  • You can download this plugin from GitHub.
  • Include jQuery library and plugin scripts.

Note – List of all banned passwords is defined in jquery.complexify.banlist.js.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<!-- Complexify -->
<script src="jquery.complexify.js/jquery.complexify.banlist.js" type="text/javascript"></script>
<script src="jquery.complexify.js/jquery.complexify.js" type="text/javascript"></script>
<!-- jQuery UI -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Note – Here, I include jQuery UI to show entered password strength in Progressbar widget.


 

2. Initialize

Call complexify() method on the password element.

Syntax –

$( selector ).complexify( { [options] }, function(valid, complexity){
  console.log(" Complexity : " + complexity + " , valid : " + valid);
});

The complexify() method have two arguments –

Options – Specify options within curly braces {} to customize the default values. Set it empty {} if you don’t want any change.

Function – This is a callback function that will be called with the results of the validation. It has two arguments –

  • valid – It has Boolean value (true/false) that represent whether the password met the minimum complexity requirements.
  • complexity – This has a numeric value that use to show strength. The value is between 0 to 100.

Completed Code

<!-- CSS -->
<style>
.txt{
 width: 193px;
 padding: 5px 3px;
 margin-bottom: 5px;
}
#progressbar{
 width: 200px;
 height: 25px;
}
</style>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
 // Initialize Progressbar
 $("#progressbar").progressbar({value: 0});

 // Initialize complexify
 $("#password").complexify({}, 
  function (valid, complexity) { //show de password level
   // Show percentage
   $('#per').text(Math.round(complexity));
   // Initialize Progressbar
   $( "#progressbar" ).progressbar({
    value: complexity
   });
  }
 );

});

</script>
 
<!-- Layout -->
<input type='password' id='password' placeholder='Enter password' class='txt' >
<div id="progressbar"></div><span id='per'>0</span>%

Output

Enter your password.


 

3. Options

There are few options to customize the default complexity behavior –

  • bannedPasswords – With this, you can either specify your own list of banned password or you can use the global COMPLEXIFY_BANLIST variable ( The variable is defined in jquery.complexify.banlist.js ). It will return 0 when the entered value finds in the list.

Example

$( "#password" ).complexify( { bannedPassword:['vishal','jiten'] }, function(valid, complexity){
 console.log(" Complexity : " + complexity + " , valid : " + valid);
});
  • minimumChars – The default value is 8. You can change it to any other value. e.g. minimumChars: 10
  • banMode – This will take either strict or loose value. The default value is strict.
    • strict – The password will fail whether sub-string or whole string find in the entered value.
    • loose – It will fail the password when it finds the exact value.

NOTE – If bannedPasswords options is defined then banMode will only search the value within the specified list.

Example

<!-- CSS -->
<style>
.txt{
 width: 193px;
 padding: 5px 3px;
 margin-bottom: 5px;
}
#progressbar{
 width: 200px;
 height: 25px;
}
</style>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){

 // Initialize Progressbar
 $("#progressbar").progressbar({value: 0});

 // Initialize complexify
 $("#password").complexify({
  bannedPasswords:['yogesh','vishal','anil'],
  minimumChars:10,
  banMode: 'strict'
  }, 
  function (valid, complexity) { //show de password level 
   // Show percentage
   $('#per').text(Math.round(complexity));
   // Initialize Progressbar
   $( "#progressbar" ).progressbar({
    value: complexity
   });
  }
 );

});

</script>
 
<!-- Layout -->
<input type='password' id='password' placeholder='Enter password' class='txt' >
<div id="progressbar"></div><span id='per'>0</span>%

Output

Use specified values bannedPasswords: ['yogesh','vishal','anil'] to make your password. e.g.  testvishal.


 

4. Conclusion

With jQuery complexify, you can show How secure the user entered password? On the basis of strength result, the user will try to choose the stronger password for its account that cannot easily be broken.

You can use any other plugin in the place of jQuery UI or make a custom layout to display the password strength.

Related Post

Spread the love

Be First to Comment

Leave a Reply

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