Create simple password strength meter using jquery

by Posted on

This is a simple program written in jquery and html to check password strength. It is very important while your website user going to choose his account password then you need to tell your user that should choose a strong password so that nobody can guess his/her password easily.

So it is very important thing for security reasons.
password-meter


See below working demo with source code.

<!DOCTYPE html>
<html>
  <head>
    <title>SIMPLE PASSWORD STRENGTH METER USING JQUERY</title>
    <style>
      #content {
        margin:0 auto;
        text-align:center;
      }
 
      .short { color:#FF0000; }
      .weak { color:#E66C2C; }
      .good { color:#2D98F3; }
      .strong { color:#006400; }
 
    </style>
  </head>
  <body>
    <div id = "content">
        <h3>SIMPLE PASSWORD STRENGTH METER USING JQUERY</h3>
       <input type="password" name="password" id="password" placeholder="Enter Password" style="width:250px;"> <br/>
<progress value=0 max=100></progress><span id="msg"></span>
 
    </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function()
{
 
    $('#password').keyup(function()
    {
        var password = $.trim($(this).val());
                var count = 0;
                var className, progress, strength;
 
               
                if(password.length < 6) count = 0
 
               
        if (password.length > 7) count += 1
        
        if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  count += 1
 
        
        if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  count += 1 
 
        
        if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  count += 1
 
        
        if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) count += 1
 
        if(count==0) {
         className = "short";
         progress = 10;
         message = "Too Short";
        }                
 
        else if (count == 1 ) {
         className = "weak";
         progress = 40;
         message = "Weak";          
                }
        else if (count == 2 ) {
              className = "good";
              progress = 70;
              message = "Good";     
        }
        else {
              className = "strong";
              progress = 100;
              message = "Strong";
        }
 
        $("#msg").removeClass();
        $("#msg").addClass(className);
        $("#msg").empty().text(message);
        $("progress").val(progress);           
 
    }); 
 
});
</script>
  </body>
</html>

If you like this post please don’t forget to subscribe My Public Notebook for more useful stuff.

Published by admin