Create Password Strength Meter in jQuery

If you want to add password strength checker feature on your password field then in this post I am going to share simple jQuery plugin which help you to enable password strength check feature on your default password field so that your user get to know their password strength.
password-strength-meter


Libraries

Include jQuery and plugins libraries on page.

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<script src="jquery.strengthify.min.js"></script>
	<link rel="stylesheet" href="strengthify.min.css" type="text/css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

HTML

Create simple password field where we need to apply password strength check.

<input id="p1" class="password-field">



JS

Now call the plugin function on page and done!

$(function() {  
  $('.password-field').strengthify({
			zxcvbn: 'https://cdn.rawgit.com/dropbox/zxcvbn/master/dist/zxcvbn.js',
			drawTitles: true,
			drawMessage: true
  });
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by MorrisJobke. Visit their official github repository for more information and follow for future updates.


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.