Password Strength Checker

Submitted by rinvizle on Thursday, August 4, 2016 - 16:49.
This tutorial we will teach you how to construct a Password Strength Checker that gives the users feedback as to whether their password has sufficiently met the complexity requirements. A strong password is critical to account security and this tutorial teaches you how to design a system that gauges password strength using jQuery. The user also will be able to click on a check box to see their real password to avoid mistake when typing their desired passwords.

Sample Code

index.php - index.php is for the user interface and for the javascript to create a dialog in the given field.
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.         <title>Password Strength Checker</title>
  5.         <link href="css/password_strength.css" rel="stylesheet" type="text/css" />
  6.         <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  7.         <script type="text/javascript" src="js/password_strength.js"></script>
  8. </head>
  9. <body>
  10. <div  id="form_wrapper">
  11. <h1 align="center">Password Strength Checker</h1>
  12.         <div><span>New Password</span></div>
  13.                 <div>
  14.                         <input class="pass-word-field" type="password" id="pass-word" />
  15.                         <input class="pass-word-field" style="display:none;" id="pass-word-two" type="text" />
  16.                 </div>
  17.                         <div><span>Verify New Password</span></div>
  18.                 <div>
  19.                         <input class="verify-password-field" type="password" id="verify-pass-word" />
  20.                         <input class="verify-password-field" style="display:none;" id="verify-pass-word-two" type="text" />
  21.                 </div>
  22.                         <div style="float:right;"><span>Show Password:</span><input type="checkbox" id="show-hide-passwords"></div><br clear="all">
  23.                 <div id="pass-status"></div>
  24.         <div class="system_buttons" onClick="submit_data();">Submit</div>
  25. </div>
  26. </body>
  27. </html>
password_strength.js - is for the inputs of data to make a short dialog and pass to the user interface to create a message to inform the user if their password is weak, good, or strong.
  1.         var pass_word = $('#pass-word');
  2.         var verify_password     = $('#verify-pass-word');
  3.         var password_status = $('#pass-status');
  4.         password_status.hide();
  5.         $(".pass-word-field").keyup(function(e)
  6.         {
  7.                 pass_word = $(this).attr('id') == "pass-word" ? $(this) : $('#pass-word-two');
  8.                 if ($(pass_word).val() == "")
  9.                 {
  10.                         password_status.hide();
  11.                         return false;
  12.                 }
  13.                 else
  14.                 {
  15.                         password_status.show();
  16.                         if(very_strong_password.test(pass_word.val()) )
  17.                         {
  18.                                 password_status.removeClass().addClass('very_strong_password').html("Very strong...");
  19.                         }      
  20.                         else if( just_strong_password.test(pass_word.val()) )
  21.                         {
  22.                                 password_status.removeClass().addClass('just_strong_password').html("Strong...");
  23.                         }      
  24.                         else if( good_password.test(pass_word.val()) )
  25.                         {
  26.                                 password_status.removeClass().addClass('considrate_pass').html("Good...");
  27.                         }
  28.                         else if( weak_password.test(pass_word.val()) )
  29.                         {
  30.                                 password_status.removeClass().addClass('password_is_weak').html("Still Weak...");
  31.                         }
  32.                         else
  33.                         {
  34.                                 password_status.removeClass().addClass('weak_password').html("Very Weak...");
  35.                         }
  36.                 }
  37.         });
Hope that you learn in this tutorial and enjoy coding. Don't forget to LIKE & SHARE this website.
Tags
#PHP
#JavaScript #Web #Jquery
Password Strength Meter

Add new comment

About text formats
  • 645 views