Create Password Strength Meter in jQuery

password-strength-meter

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.

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.

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 *

Top