Create simple password strength meter using jquery

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.

See below working demo with source code.

<!DOCTYPE html>
      #content {
        margin:0 auto;
      .short { color:#FF0000; }
      .weak { color:#E66C2C; }
      .good { color:#2D98F3; }
      .strong { color:#006400; }
    <div id = "content">
       <input type="password" name="password" id="password" placeholder="Enter Password" style="width:250px;"> <br/>
<progress value=0 max=100></progress><span id="msg"></span>
  <script src=""></script>
        var password = $.trim($(this).val());
                var count = 0;
                var className, progress, strength;
               //if the password length is less than 6
                if(password.length < 6) count = 0
               //if length is 8 characters or more, increase counter value
        if (password.length > 7) count += 1
        //if password contains both lower and uppercase characters, increase counter value
        if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  count += 1
        //if it has numbers and characters, increase counter value
        if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  count += 1 
        //if it has one special character, increase counter value
        if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  count += 1
        //if it has two special characters, increase counter value
        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";

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.