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.
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
- <script src="CheckPasswordStrength.js"></script>
- <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.
- $(document).ready(function () {
- $('#txtPassword').keyup(function () {
- $('#strengthMessage').html(checkStrength($('#txtPassword').val()))
- })
- function checkStrength(password) {
- var strength = 0
- if (password.length < 6) {
- $('#strengthMessage').removeClass()
- $('#strengthMessage').addClass('Short')
- return 'Too short'
- }
- if (password.length > 7) strength += 1
-
- if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
-
- if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
-
- if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
-
- if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
-
-
- if (strength < 2) {
- $('#strengthMessage').removeClass()
- $('#strengthMessage').addClass('Weak')
- return 'Weak'
- } else if (strength == 2) {
- $('#strengthMessage').removeClass()
- $('#strengthMessage').addClass('Good')
- return 'Good'
- } else {
- $('#strengthMessage').removeClass()
- $('#strengthMessage').addClass('Strong')
- return 'Strong'
- }
- }
- });
Step-5
Right-click and add style. Give it the name CheckPasswordStrength.css
- .Short {
- width: 100%;
- background-color: #dc3545;
- margin-top: 5px;
- height: 3px;
- color: #dc3545;
- font-weight: 500;
- font-size: 12px;
- }
- .Weak {
- width: 100%;
- background-color: #ffc107;
- margin-top: 5px;
- height: 3px;
- color: #ffc107;
- font-weight: 500;
- font-size: 12px;
- }
- .Good {
- width: 100%;
- background-color: #28a745;
- margin-top: 5px;
- height: 3px;
- color: #28a745;
- font-weight: 500;
- font-size: 12px;
- }
- .Strong {
- width: 100%;
- background-color: #d39e00;
- margin-top: 5px;
- height: 3px;
- color: #d39e00;
- font-weight: 500;
- font-size: 12px;
- }
Step-6
Design the HTML of the web form.
- <body>
- <form id="form1" runat="server">
- <div class="container py-3">
- <h4 class="text-center text-uppercase">How to check password strength in jquery</h4>
- <div class="row">
- <div class="col-md-12">
- <div class="row">
- <div class="col-md-6 mx-auto">
- <div class="card border-secondary">
- <div class="card-header">
- <h3 class="mb-0 my-2">Sign Up</h3>
- </div>
- <div class="card-body">
- <div class="form-group">
- <label>Name</label>
- <div class="input-group">
- <div class="input-group-prepend">
- <span class="input-group-text"><i class="fa fa-user"></i></span>
- </div>
- <asp:TextBox ID="txtFirstName" runat="server" CssClass="form-control"></asp:TextBox>
- </div>
- </div>
- <div class="form-group">
- <label>Phone Number</label>
- <div class="input-group">
- <div class="input-group-prepend">
- <span class="input-group-text"><i class="fa fa-phone"></i></span>
- </div>
- <asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="form-control"></asp:TextBox>
- </div>
- </div>
- <div class="form-group">
- <label>Email</label>
- <div class="input-group">
- <div class="input-group-prepend">
- <span class="input-group-text"><i class="fa fa-envelope"></i></span>
- </div>
- <asp:TextBox ID="txtEmail" runat="server" CssClass="form-control"></asp:TextBox>
- </div>
- </div>
- <div class="form-group">
- <label>Password</label>
- <div class="input-group">
- <div class="input-group-prepend">
- <span class="input-group-text"><i class="fa fa-lock"></i></span>
- </div>
- <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="form-control"></asp:TextBox>
- </div>
- <div id="strengthMessage"></div>
- </div>
- <div class="form-group">
- <label>Confirm Password</label>
- <div class="input-group">
- <div class="input-group-prepend">
- <span class="input-group-text"><i class="fa fa-lock"></i></span>
- </div>
- <asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password" CssClass="form-control"></asp:TextBox>
- </div>
- </div>
- <div class="form-group">
- <button type="submit" class="btn btn-success float-right rounded-0">Register</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </form>
- </body>
Step-7 - Run the project by pressing ctr+F5.
Here is the final output.
Short Password
Good Password
Strong Password