ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

Password Checker in jQuery

passCheckerPITUTs

In this tutorial, I will teach you how to validate the password with jQuery. This method has a capability to check the strength of the input passwords. It will visually display the quality of the user’s password if it is weak, medium or strong. With this, you can measure the effectiveness of your password in  multiple guessing and brute-force attacks.

 

Let’s begin:

  • Create a landing page ang name it “index.php“.
  • Create a style for the layout of the design on your page.
<style>
 #pass {
 padding:4px;
 margin:2px;
 border:solid 1px #999;
 } 
 div { 
 margin-top:5px;
 }
 .pull-left {
 float:left;
 padding: 1px 7px 1px 7px;
 } 
 </style>
  • Do these following codes for the design of the page.
<!DOCTYPE html>
<html>
<head>
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 <title>Password Checker</title>
</head>
<body>
 <h1>Password Checker</h1>
 <form id="form" name="form">
 <input class="pull-left" data-display="passStats" id="pass" size="20"
 type="password">
 <div class="pull-left" id="passStats"></div>
 </form>
</body>
</html>
  • Set the following jQuery plugins in the footer of your design.
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="passChecker.jquery.js"></script>
  • Finally, create a validation script for validating password .
<script>
 $(document).ready(function(){
 
 $('#form').submit(function(){
 return false;
 });
 
 $('#pass').pStrength({
 'changeBackground' : false,
 'onPasswordStrengthChanged' : function(passwordStrength, strengthPercentage) {
 if ($(this).val()) {
   $.fn.pStrength('changeBackground', "#passStats", passwordStrength); 
 if (strengthPercentage >= 0 && strengthPercentage < 34 ) { 
   $('#' + $(this).data('display')).html('weak');

 }else if (strengthPercentage >= 34 && strengthPercentage < 60 ) { 
   $('#' + $(this).data('display')).html('medium');
 }else if (strengthPercentage >= 60 && strengthPercentage <= 100 ) { 
   $('#' + $(this).data('display')).html('strong');
 }
 } else {
   $.fn.pStrength('resetStyle', "#passStats");
   $('#' + $(this).data('display')).html('');
 }
 
 },
 'onValidatePassword': function(strengthPercentage) {
 $('#' + $(this).data('display')).html(
    $('#' + $(this).data('display')).html()
 );
 
 $('#form').submit(function(){
 return true;
 });
 }
 });
 });
 </script>

 

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :

 

 

Email – jannopalacios@gmail.com
Mobile No. – 09305235027 – tnt

 

Download Sourcecode

Facebook Comments

Check Your Domain Ranking

1 Comment

Add a Comment
  1. Link exchange is nothing else but it is just placing the
    other person’s weblog link on your page at
    suitable place and other person will also do
    same in support of you.

Leave a Reply

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

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!