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