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