How to Create a Password Strength Indicator With jQuery

How to Create a Password Strength Indicator With jQuery
by Janeth Kent 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 Janeth Kent Date: 18-12-2013 jquery resources tutorials tips plugins snippets webdev hits : 11770  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Related Posts

Interesting and Helpful Google Search Features You’ll Want to Start Using

Google – THE search engine for many internet users. It has been with us since its launch back in 1998 and thanks to its simplicity of use and genius algorithms,…

How to use your browser as a file browser, in Chrome or Microsoft Edge

We're going to explain how to use the Chrome browser as a file browser, both on Android and on your computer. This is a hidden feature of Chromium that will…

How to watch deleted or private Youtube videos

Today we are going to talk about the technique which you permit to be able to recover videos from Youtube that was deleted, made private or simply blocked by Youtube…

How to ‘leave’ a WhatsApp group without actually leaving

If you want to leave a WhatsApp group but don't want the 'You left the group' message to be displayed, read this article. Some people love WhatsApp groups, and some people…

The 6 Essentials for Creating a Visually Appealing Web Design

Creating a website might seem like a simple thing. After all, what do you really need besides a good hosting provider and relevant content, right? Well, the reality is quite…

How to get notified when one of your WhatsApp contact is online

Privacy is one of the most important aspects among most users of the popular Facebook messaging application. So much so, that many settings have been included in WhatsApp itself to…

How to change font size and format in WhatsApp

Your WhatsApp messages can be much more original and fun by changing the font, size, or format. Here's how. WhatsApp is the leading messaging app for virtually everyone, with permission from…

WhatsApp: How to View Deleted Messages

Words are carried away by the wind, as long as they are not written on WhatsApp. Sending it was like getting a tattoo, something you'll always like, or yet it'll…

How to enable Chrome's new feature that blocks ads that consume your CPU, battery, and Internet connection

Google has announced that it will begin experimenting with a technology that they have been developing for months, in order to improve the battery consumption of our computers and the…

Protect yourself: know which apps have access to your location, microphone and camera

When you install an application on your smartphone, you decide what permissions you give it, but it's not always clear. We tell you how to know if those permissions are…

Can Easier Returns Mean Better Business?

Any eCommerce business owner knows that returns are a part of the packaged deal. At the end of the day, today’s consumer holds all of the power. They are informed,…

How to disable the camera, microphone and all sensors on your phone with a single touch in Android 10

With Android 10, Google has improved the privacy of its operating system with new options, but has also hidden an interesting option that deactivates all the sensors of the device…

Clicky