How To Create A Simple Password Strength Checker In jQuery

A lot of new hacking methods are coming day by day. So it’s the programmers duty to make their user’s password secure. Here is a simple Password Strength Checker created using jQuery. The code contain a function got from WordPress (I modified it) which is the core component of the checker. This checker will check the following on the password :

Have minimum value of 4 characters.
Whether the username matches with password
Whether the password contain small a-z characters and capital A-Z characters.
Whether the password has numeric characters and special characters.

If all of the above criteria is matched, the checker will give a Strong Password message.

Download Demo

Create two files : index.html and passchecker.js
We will also include the jQuery library on the HTML file.

index.html

<!DOCTYPE html>
<html>
 <head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="passchecker.js"></script>
  <title>Simple jQuery Password Strength Checker</title>
 </head>
 <body>
  <div id="content" style="margin-top:10px;height:100%;">
   <center><h1>Simple jQuery Password Strength Checker</h1></center>
   <table><tbody>
    <tr>
     <td>
      Username :
     </td>
     <td>
      <input type="text" size="35" id="user" placeholder="Username"/>
     </td>
    </tr>
    <tr>
     <td>
      Password :
     </td>
     <td>
      <input type="password" size="35" id="pass" placeholder="Type A Password"/>
     </td>
    </tr>
    <tr>
     <td></td>
     <td>
      <div id="ppbar" title="Strength"><div id="pbar"></div></div>
      <div id="ppbartxt"></div>
     </td>
    <tr>
     <td>
      Retype Password :
     </td>
     <td>
      <input type="password" size="35" id="pass2" placeholder="ReType Password"/>
     </td>
    </tr>
   </tbody></table>
  </div>
  <style>
  input{
   border:none;
   padding:8px;
  }
  #ppbar{
   background:#CCC;
   width:300px;
   height:15px;
   margin:5px;
  }
  #pbar{
   margin:0px;
   width:0px;
   background:lightgreen;
   height: 100%;
  }
  #ppbartxt{
   text-align:right;
   margin:2px;
  }
  </style>
<!-- http://www.subinsb.com/2013/10/create-simple-password-strength-checker-using-jquery.html -->
 </body>
</html>

passchecker.js

function passwordStrength(f,i,d){var k=1,h=2,b=3,a=4,c=5,g=0,j,e;if((f!=d)&&d.length>0){return c}if(f.length==0){return 0;}if(f.length<4){return k}if(f.toLowerCase()==i.toLowerCase()){return h}if(f.match(/[0-9]/)){g+=10}if(f.match(/[a-z]/)){g+=26}if(f.match(/[A-Z]/)){g+=26}if(f.match(/[^a-zA-Z0-9]/)){g+=31}j=Math.log(Math.pow(g,f.length));e=j/Math.LN2;if(e<40){return h}if(e<56){return b}return a};
function widthofpr(p){
 if(p==0){return "0%";}
 if(p==1){return "25%";}
 if(p==2){return "50%";}
 if(p==3){return "75%";}
 if(p==4){return "100%";}
}
function textofpr(p){
 if(p==0){return "Type A Password";}
 if(p==1){return "Short Password";}
 if(p==2){return "Bad Password";}
 if(p==3){return "Good Password";}
 if(p==4){return "Strong Password";}
 if(p==5){return "Password Mismatch";}
}
$(document).ready(function(){
 user=$("#user");
 pass=$("#pass");
 pass2=$("#pass2");
 pbar=$("#pbar");
 pbart=$("#ppbartxt");
 function onKeyUp(){
  pbar.css('width',widthofpr(passwordStrength(pass.val(),user.val(),pass2.val())));
  pbart.text(textofpr(passwordStrength(pass.val(),user.val(),pass2.val())));
 }
 pass.bind('keyup',function(){
  onKeyUp();
 });
 pass2.bind('keyup',function(){
  onKeyUp();
 });
});

When a keypress event is fired on any one of the password fields, jQuery will check the password strength and print according to the strength. Easy as compiling Python.
If you have any problems / suggestions / feedback, contact me via comments. I am here 10/7.