JQuery

How To Check Password Strength In jQuery

Introduction

In this blog, we will discuss how to create a password strength indicator using jQuery.

Step-1

Create an empty project in the Visual Studio version of your choice. Give it a meaningful name.

Step-2

Add web form, right click on it, add a new item and choose web form. Then, give it a name.

Step-3

Add links of scripts and styles in the head section of the web form.

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">  
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  4. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>  
  5. <script src="CheckPasswordStrength.js"></script>  
  6. <link href="CheckPasswordStrength.css" rel="stylesheet" />   

Stpe-4

Right-click to add script, give it a name as CheckPasswordStrength.js. 

Write the following jQuery script for password strength.

  1. $(document).ready(function () {  
  2.     $('#txtPassword').keyup(function () {  
  3.         $('#strengthMessage').html(checkStrength($('#txtPassword').val()))  
  4.     })  
  5.     function checkStrength(password) {  
  6.         var strength = 0  
  7.         if (password.length < 6) {  
  8.             $('#strengthMessage').removeClass()  
  9.             $('#strengthMessage').addClass('Short')  
  10.             return 'Too short'  
  11.         }  
  12.         if (password.length > 7) strength += 1  
  13.         // If password contains both lower and uppercase characters, increase strength value.  
  14.         if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1  
  15.         // If it has numbers and characters, increase strength value.  
  16.         if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1  
  17.         // If it has one special character, increase strength value.  
  18.         if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1  
  19.         // If it has two special characters, increase strength value.  
  20.         if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1  
  21.         // Calculated strength value, we can return messages  
  22.         // If value is less than 2  
  23.         if (strength < 2) {  
  24.             $('#strengthMessage').removeClass()  
  25.             $('#strengthMessage').addClass('Weak')  
  26.             return 'Weak'  
  27.         } else if (strength == 2) {  
  28.             $('#strengthMessage').removeClass()  
  29.             $('#strengthMessage').addClass('Good')  
  30.             return 'Good'  
  31.         } else {  
  32.             $('#strengthMessage').removeClass()  
  33.             $('#strengthMessage').addClass('Strong')  
  34.             return 'Strong'  
  35.         }  
  36.     }  
  37. });  

Step-5

Right-click and add style. Give it the name CheckPasswordStrength.css

  1. .Short {  
  2.     width: 100%;  
  3.     background-color: #dc3545;  
  4.     margin-top: 5px;  
  5.     height: 3px;  
  6.     color: #dc3545;  
  7.     font-weight: 500;  
  8.     font-size: 12px;  
  9. }  
  10. .Weak {  
  11.     width: 100%;  
  12.     background-color: #ffc107;  
  13.     margin-top: 5px;  
  14.     height: 3px;  
  15.     color: #ffc107;  
  16.     font-weight: 500;  
  17.     font-size: 12px;  
  18. }  
  19. .Good {  
  20.     width: 100%;  
  21.     background-color: #28a745;  
  22.     margin-top: 5px;  
  23.     height: 3px;  
  24.     color: #28a745;  
  25.     font-weight: 500;  
  26.     font-size: 12px;  
  27. }  
  28. .Strong {  
  29.     width: 100%;  
  30.     background-color: #d39e00;  
  31.     margin-top: 5px;  
  32.     height: 3px;  
  33.     color: #d39e00;  
  34.     font-weight: 500;  
  35.     font-size: 12px;  
  36. }  

Step-6

Design the HTML of the web form.

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div class="container py-3">  
  4.             <h4 class="text-center text-uppercase">How to check password strength in jquery</h4>  
  5.             <div class="row">  
  6.                 <div class="col-md-12">              
  7.                     <div class="row">  
  8.                         <div class="col-md-6 mx-auto">  
  9.                             <div class="card border-secondary">  
  10.                                 <div class="card-header">  
  11.                                     <h3 class="mb-0 my-2">Sign Up</h3>  
  12.                                 </div>  
  13.                                 <div class="card-body">  
  14.                                     <div class="form-group">  
  15.                                         <label>Name</label>  
  16.                                         <div class="input-group">  
  17.                                             <div class="input-group-prepend">  
  18.                                                 <span class="input-group-text"><i class="fa fa-user"></i></span>  
  19.                                             </div>  
  20.                                             <asp:TextBox ID="txtFirstName" runat="server" CssClass="form-control"></asp:TextBox>  
  21.                                         </div>  
  22.                                     </div>  
  23.                                     <div class="form-group">  
  24.                                         <label>Phone Number</label>  
  25.                                         <div class="input-group">  
  26.                                             <div class="input-group-prepend">  
  27.                                                 <span class="input-group-text"><i class="fa fa-phone"></i></span>  
  28.                                             </div>  
  29.                                             <asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="form-control"></asp:TextBox>  
  30.                                         </div>  
  31.                                     </div>  
  32.                                     <div class="form-group">  
  33.                                         <label>Email</label>  
  34.                                         <div class="input-group">  
  35.                                             <div class="input-group-prepend">  
  36.                                                 <span class="input-group-text"><i class="fa fa-envelope"></i></span>  
  37.                                             </div>  
  38.                                             <asp:TextBox ID="txtEmail" runat="server" CssClass="form-control"></asp:TextBox>  
  39.                                         </div>  
  40.                                     </div>  
  41.                                     <div class="form-group">  
  42.                                         <label>Password</label>  
  43.                                         <div class="input-group">  
  44.                                             <div class="input-group-prepend">  
  45.                                                 <span class="input-group-text"><i class="fa fa-lock"></i></span>  
  46.                                             </div>  
  47.                                             <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="form-control"></asp:TextBox>  
  48.                                         </div>  
  49.                                         <div id="strengthMessage"></div>  
  50.                                     </div>  
  51.                                     <div class="form-group">  
  52.                                         <label>Confirm Password</label>  
  53.                                         <div class="input-group">  
  54.                                             <div class="input-group-prepend">  
  55.                                                 <span class="input-group-text"><i class="fa fa-lock"></i></span>  
  56.                                             </div>  
  57.                                             <asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password" CssClass="form-control"></asp:TextBox>  
  58.                                         </div>  
  59.                                     </div>  
  60.                                     <div class="form-group">  
  61.                                         <button type="submit" class="btn btn-success float-right rounded-0">Register</button>  
  62.                                     </div>  
  63.                                 </div>  
  64.                             </div>  
  65.                         </div>  
  66.                     </div>  
  67.                 </div>  
  68.             </div>  
  69.         </div>  
  70.     </form>  
  71. </body>  

Step-7 - Run the project by pressing ctr+F5.

Here is the final output.

Short Password

output 

Weak Password

 output
Good Password
 output
Strong Password
output
Membership not found