How to Create a Password Strength Indicator With Jquery

by admin Date: 18-12-2013 jquery resources tutorials tips plugins snippets webdev


If you are building a system that allows the users to login in, then it is always a good idea to give them an indication of how safe their password is.

In this tutorial we are going to create a simple JQuery snippet that will check the user password and let them know how secure it is.

The Form

First of all, we are going to start this tutorial by building the html form with a password input box and a confirm password box.

<form action="" method="post">      	
<p>
<label for="passwordInput">Password: 
<input type="password" id="passwordInput" name="passwordInput"></label>
</p>  	
<p><label for="confirmPasswordInput">Confirm Password: 
<input type="password" id="confirmPasswordInput" name="confirmPasswordInput"></label>
</p>  	
<p>
<div class="" id="passwordStrength"></div>
</p>  	
<p><input type="submit" value="Change Password" class="btn"></p>  
</form>

IMPORTANT: the div is on the form in between the input textboxes an the submit button, this is where we will show the message for the strength of the current password.

JQuery Password Strength

There are a couple of things that we need to check when we evaluate the password.

  • Check that the password and the confirm password match each other.
  • Check that the password is at least 6 characters long.
  • If the password is more than 6 characters with no capital letters or numbers then it is a weak password.
  • If the password is more than 6 characters with a capital letter or numbers then it is a medium password.
  • If the password is more than 6 characters with a capital letter, number and special character then it is a strong password.

So, we will create the regular expression to check all of these states and show a message if the regular expression fails against any of these passwords.

First of all we have to check if the password and confirm password match, if they don't, the user has made a mistake when entering the password, therefore there is no need to check the strength of the password if it is incorrect.

Once these two password fields match then we can perform the checks on the strength of the password, which is done with the following regular expressions.

Strong Password

// Must have capital letter, numbers and lowercase letters  
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");

Medium Password

// Must have either capitals and lowercase letters or lowercase and numbers  
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");

Weak Password

// Must be at least 6 characters long  
var okRegex = new RegExp("(?=.{6,}).*", "g");

Then we need to checkt each of these patterns to see which one it passes, as the strong password has the most conditions we need to check this first, then medium pattern, then the weak pattern.

Checking the password strength

$(document).ready(function() {         
$('#passwordInput, #confirmPasswordInput').on('keyup', function(e) {             
if($('#passwordInput').val() == '' &#038;& $('#confirmPasswordInput').val() == '')          
{              
$('#passwordStrength').removeClass().html('');                 
return false;          
}          
if($('#passwordInput').val() != '' &#038;& $('#confirmPasswordInput').val() != '' &#038;& $('#passwordInput').val() != $('#confirmPasswordInput').val())      	
{      		
$('#passwordStrength').removeClass().addClass('alert alert-error').html('Passwords do not match!');          	
return false;      	
}            
 // Must have capital letter, numbers and lowercase letters          
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");             
// Must have either capitals and lowercase letters or lowercase and numbers          
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");             
// Must be at least 6 characters long          
var okRegex = new RegExp("(?=.{6,}).*", "g");             
if (okRegex.test($(this).val()) === false) {               
If ok regex doesn't match the password          	
$('#passwordStrength').removeClass().addClass('alert alert-error').html('Password must be 6 characters long.');             
} else if (strongRegex.test($(this).val()))
 {              
// If reg ex matches strong password             
 $('#passwordStrength').removeClass().addClass('alert alert-success').html('Good Password!');          
} else if (mediumRegex.test($(this).val())) {             
 // If medium password matches the reg ex              
$('#passwordStrength').removeClass().addClass('alert alert-info').html('Make your password stronger with more capital letters, more numbers and special characters!');          
} else {              
// If password is ok              
$('#passwordStrength').removeClass().addClass('alert alert-error').html('Weak Password, try using numbers and capital letters.');          
}                    
return true;      
});  
});

 

 

 

original source: http://www.paulund.co.uk/

 
by admin Date: 18-12-2013 jquery resources tutorials tips plugins snippets webdev hits : 8520  
 
 
 
 

Related Posts

    Understanding the JavaScript language (guidelines for beginners)

    What began in 1995 as a modest 10-day project is now one of the world's most commonly used programming languages. JavaScript is actually everywhere, thanks to more advanced JavaScript engines…

    How To Grow Your Small Business

    A business that stays still will stagnate. To be successful and to have a business to be proud of, you need to ensure that it grows. This is not always…

    Level Up Your JavaScript Skills: 12 basic notions

    If you are a developer at any level, understanding its basic concepts is crucial. This article highlights 12 basic concepts that are critical to understanding by any JS developer, but do…

    Is jQuery going to die in 2019?

    For a while, JQuery's relevance has been a topic of debate among web developers. We were curious as web developers interested in Javascript to know what others have to say…

    Best 5 Javascript NewsTicker Plugins

    Not all developers know the marquee tag of HTML, that allows you to create a scrolling piece of text or image displayed that is shown horizontally or vertically on the DOM.…

    Best Javascript front-end hacking cheatsheets

    JavaScript has a extremely high potential to build cutting-edge web applications. But it's really hard to memorize it by heart. The JavaScript cheat sheets therefore act perfectly as a reminder…

    Tips for JavaScript Developers in 2019

    Another year is over and JavaScript is constantly changing. However, there are some tips that can help you write in 2019 clean and efficient code that scales. Below is a…

    Working with JSON in JavaScript

    JSON is short for JavaScript Object Notation and an easy - to - access way to store information. In short, it gives us a collection of human - readable data…

    JavaScript Basis: Syntax & Structure

    Programming languages are defined by rules. The syntax is what we follow when we write our code, which forms the logical structure of our programs. Let's dive right into the basic…

    Crazy SEO Tips For 2019

    Are you interested in learning more about SEO in 2019? Here are the trends you need to follow to improve your search optimization skills. For those who don’t know about SEO,…

    Top 10 JavaScript Books 2019

    Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale applications. If you're an aspiring web developer then…

    6 JavaScript Utility Libraries you Should Know in 2019

    Nowadays Javascript is the most popular and widely used programming language, so the ecosystem around it constantly grows. However, it is expected that the small "standard library" of Javascript will remain…