Post
Ask Question

Password Strength Checker in jQuery

Introduction

This article shows how to create a password strength checker using jQuery. This is very important for our website to check whether or not a password is strong.
 
Strong Passwords

The strength of a password depends on the various types of characters that you use, the overall length of the password and whether the password can be found in a dictionary. It should be 8 or more characters long. The stronger that a password is, the more difficult it is to guess what it is.
 
Importance of Strong Passwords

Strong passwords protect your computer, your data and your online accounts. If your password is not strong then any hacker can hack your account. There are many techniques being used to steal passwords. Some of the most common include:
  • Guessing 
  • Dictionary-based attacks
  • Brute Force attacks

How to create a password strength checker using jQuery
 
The following is a sample password strength checker using jQuery. This example has the five stages of password strength, very weak, weak, medium, strong and very strong. They all are calculated on your password characters and its length.
 
Code:
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4. <!--Include JQuery and PWDMeter-->  
  5.     <script type="text/javascript" src="jquery-1.8.0.min.js"></script>  
  6.     <script type="text/javascript" src="jquery.pwdMeter.js"></script>  
  7.   
  8. <!--Jquery to fire a plugin method-->  
  9.     <script type="text/javascript">  
  10.         $(document).ready(function(){  
  11.            
  12.                 $("#password").pwdMeter();  
  13.            
  14.             });  
  15.     </script>  
  16.   
  17. <!--Style Sheets-->  
  18.     <style>  
  19.         .veryweak{  
  20.             color:#FF0000;  
  21.         }  
  22.         .weak{  
  23.             color:#FFAAAA;  
  24.         }  
  25.         .medium{  
  26.             color:#FFFF00;  
  27.         }  
  28.         .strong{  
  29.             color:#0000FF;  
  30.         }  
  31.         .verystrong{  
  32.             color:#00FF00;  
  33.         }  
  34.     </style>  
  35.   </head>  
  36.   
  37. <!--Body of The HTML-->  
  38.   <body>  
  39.     <h1>PASSWORD STRENGTH CHECKER IN JQUERY</h1>  
  40. <b>Type Your password:</b><input type="password" id="password" />   
  41.     <span id="pwdMeter" class="neutral">  
  42.   </body>  
  43. </html>  
 
 Output:
  Onload:

 

Very Week Password


Week Password:


Medium Password:


Strong Password:


Very Strong Password:



Similar Articles