Password Strength Checker in jQuery

Sourabh Somani
10y
7.7k
0
3

Article

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:

<!DOCTYPE html>
<html>
  <head>

    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="jquery.pwdMeter.js"></script>


    <script type="text/javascript">
        $(document).ready(function(){

                $("#password").pwdMeter();

            });
    </script>


    <style>
        .veryweak{
            color:#FF0000;
        }
        .weak{
            color:#FFAAAA;
        }
        .medium{
            color:#FFFF00;
        }
        .strong{
            color:#0000FF;
        }
        .verystrong{
            color:#00FF00;
        }
    </style>
  </head>


  <body>
    <h1>PASSWORD STRENGTH CHECKER IN JQUERY</h1>
<b>Type Your password:</b><input type="password" id="password" />
    <span id="pwdMeter" class="neutral">
  </body>
</html>