Create password strength checker using Jquery – This is very helpful for who wants to generate very strong password in their account like facebook or gmail. So i have develop the simple password strength checker application using jquery. If you have create the strong password, you have escaping from hackers, suppose you are build the weak password then the hackers are easily identify your password.

Create password strength checker using jQuery

If you want to make a very strong password then you have add minimum 13 digit contain numbers, latter, dollar signs and capital latter generate a good and secure password.

Demo

Create password strength checker using Jquery

I have used some Jquery plugins used to check the password strength. This is the simple plugin and you have easily devlop and customized your plugin as you want like. Then you have also add some HTML, JScript code and AngularJS, its helps to implement the client side design

These below two plugins are i have used in this project,

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

Password strength checker code

This is some of code to be check the password strength through jquery coding. Here i have used simple line of code used and execute the password strength.

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

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

    });
</script>

Embedded with HTML code

Now just i have embedded the Jquery code in HTML and implement the some code for designing and executing the script of entire jquery code.

<div id="grid">
  <input type="password" id="password">
  <span id="pwdMeter" class="neutral"></span>
</div>

This code will show the textbox to enter password and when you enter something in password field it shows you strength or weak.

Include CSS code to decorate webpage

Build some CSS code to look beautiful design for password sytem, its attract for each and every users to use repeatly in your site.

<style>
.veryweak
{
color:#B40404;
}
.weak
{
color:#DF7401;
}
.medium
{
color:#FFFF00;
}
.strong
{
color:#9AFE2E;
}
.verystrong
{
color:#0B610B;
}
</style>

In CSS code to build some of classes in password checker application.

Entire code in password strength

The full of code will be embedded in jquery library. Here we have add some HTML and CSS files to integrate the jquery plugins. If you want to modify the same plugin as you want like, execute the script.

<html>
  <head>
    <title>Create password strength checker using jQuery</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <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:#B40404;
        }
        .weak{
            color:#DF7401;
        }
        .medium{
            color:#FFFF00;
        }
        .strong{
            color:#9AFE2E;
        }
        .verystrong{
            color:#0B610B;
        }
    </style>
  </head>
  <body>
    <h2>Create password strength checker using jQuery&nbsp;&nbsp;&nbsp; <a href="http://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>
    <div style="margin-left:auto;margin-right:auto; width:260px;"><input type="password" id="password" />&nbsp;
    <span id="pwdMeter" class="neutral"></span></div><br />
  </body>
</html>
Click to download
Click to download

we hope you have understand how to develop password strength checker, or still struggling to develop password strength application feel free to comment below.