How to make Password Strength meter using JavaScript
Posted on March 10, 2021, 8 p.m. by Bishal ( 8091)
Hi Everyone, Code With Bishal is back with a new project. So grab your PC and open your favourite Code Editor and start coding with me. In this blog, we will make a password strength meter using JavaScript. Whether it's a registration form or a google account's password. A person should never use a weak password. A weak password is generally considered as a password those are short in length, common, not included any numbers, spaces, special characters and containing personal information such as name, birthday, username, email addresses. According to Google, A strong password should always contain a longer character, it can be any combination of letters, numbers, and symbols. Always keep your passwords unique and always use different passwords for different accounts. To Generate a strong password you can click: Generate Strong Password. Continue reading this blog to check your password strength. All the downloadable resources are attached to this blog, You can easily download these with the help of the buttons below.
The Password Strength checker uses Bootstrap Framework and JavaScript.
So, How we will check the Password Strength?
We will use JavaScript Regex (Regular Expression) to check password strength in JavaScript.
We will also use the HTML onkeyup (one can also use JavaScript addEventListener keyup or JavaScript onkeyup) method to update the values of the input field.
Resources:
-
More About addEventListener
-
More About onkeyup
We will first divide the Regular Expression into three parts. If the password matches with the first part i.e. if the password only contains English alphabet letters from A to Z, and the length of the password is less than or equals to 3, the password will be considered as a weak password.
let regExpWeak = /[a-z]/;
If the password matches with the second part i.e. if the password contains English alphabet letters along with numerical digits, and the length of the password is more than or equals to 6, the password will be considered as a medium password.
let regExpMedium = /\d+/;if the password matches with the third part i.e. if the password contains English alphabet letters along with special characters and numerical digits, and the length of the password is more than or equals to 6, the password will be considered as a hard password.
let regExpStrong = /.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/;
Some Screenshots
Strength of the Password is Strong
Strength of the Password is Medium
Strength of the Password is Weak
Demo
Weak Password
Medium Password
Strong Password
Step by step guide to check the strength of the password using JavaScript:
-
Create a file with the name
index.html -
Open
index.html -
Add the Broiler plate of HTML
Broiler Plate of HTML with Bootstrap CSS CDN linked:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>How to make Password Strength meter using JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
-
Create a file
script.js -
Link External JavaScript file with your HTML file
Here is how can you link:
Add these code in the <head> </head> of your HTML document:
<script src="script.js"></script>
Now add some JavaScript code to the script.js file:
const input = document.querySelector("#password");
const weak = document.querySelector(".weak");
const medium = document.querySelector(".medium");
const strong = document.querySelector(".strong");
const btn = document.querySelector(".submit-btn");
btn.classList.add("disabled");
let regExpWeak = /[a-z]/;
let regExpMedium = /\d+/;
let regExpStrong = /.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/;
function checkPassword() {
//code here
}
-
Create a file
style.css -
Link External CSS file with your HTML file
Here is how can you link:
Add these code in the <head> </head> of your HTML document:
<link href="style.css" rel="stylesheet">
Now add some CSS code to the style.css file:
.weak,.strong,.medium {
display: none;
}
input:focus {
box-shadow: none !important;
}
Source Code
1) HTML Code:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>How to make Password Strength meter using JavaScript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="container p-5 text-center">
<input onkeyup="checkPassword()" type="password" placeholder="Type password" class="form-control"
id="password">
<div class="icons">
<div class="weak alert alert-danger" role="alert">Weak Password</div>
<div class="medium alert alert-warning" role="alert">Medium Password</div>
<div class="strong alert alert-success" role="alert">Strong Password</div>
</div>
<a href="#" class="submit-btn btn btn-primary my-5">Submit</a>
</div>
</body>
</html>
2) CSS Code:
.weak,.strong,.medium {
display: none;
}
input:focus {
box-shadow: none !important;
}
3) JavaScript Code:
const input = document.querySelector("#password");
const weak = document.querySelector(".weak");
const medium = document.querySelector(".medium");
const strong = document.querySelector(".strong");
const btn = document.querySelector(".submit-btn");
btn.classList.add("disabled");
let regExpWeak = /[a-z]/;
let regExpMedium = /\d+/;
let regExpStrong = /.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/;
function checkPassword() {
if (input.value != "") {
if (input.value.length <= 3 && (input.value.match(regExpWeak) || input.value.match(regExpMedium) || input.value.match(regExpStrong))) no = 1;
if (input.value.length >= 6 && ((input.value.match(regExpWeak) && input.value.match(regExpMedium)) || (input.value.match(regExpMedium) && input.value.match(regExpStrong)) || (input.value.match(regExpWeak) && input.value.match(regExpStrong)))) no = 2;
if (input.value.length >= 6 && input.value.match(regExpWeak) && input.value.match(regExpMedium) && input.value.match(regExpStrong)) no = 3;
if (no == 1) {
input.style.borderColor = "#e74c3c";
input.style.background = "#fceae9";
weak.style.display = "block";
medium.style.display = "none";
strong.style.display = "none";
}
if (no == 2) {
input.style.borderColor = "#4df3cds";
input.style.background = "rgb(255, 243, 205, 0.5)";
weak.style.display = "none";
medium.style.display = "block";
strong.style.display = "none";
}
if (no == 3) {
input.style.borderColor = "#27ae60";
input.style.background = "#eafaf1";
strong.style.display = "block";
weak.style.display = "none";
medium.style.display = "none";
btn.classList.remove("disabled");
}
} else {
input.style.borderColor = "blue";
input.style.background = "white";
strong.style.display = "none";
weak.style.display = "none";
medium.style.display = "none";
btn.classList.add("disabled");
}
}