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

Add new comment

About text formats
  • 611 views