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 contains both lower and uppercase characters, increase strength value.
- if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
- // If it has numbers and characters, increase strength value.
- if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
- // If it has one special character, increase strength value.
- if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
- // If it has two special characters, increase strength value.
- if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
- // Calculated strength value, we can return messages
- // If value is less than 2
- 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.
Pankaj KrPosted May 2, 2019, 9:36 PM
Nice article
Rajesh KumarPosted Nov 18, 2018, 10:36 PM
Nice article, Thanks for sharing..................................
Rehman ShahidPosted Apr 15, 2018, 3:38 AM
Nice......................
Sagar Pandurang KapPosted Apr 1, 2018, 11:59 PM
Very nice. Helpful.Thanks