Password Strength Checker Using Javascript | Password Strength Checker
Hello, a very warm welcome to the codewithrandom new blog in which we will create an input in which we can type our password and check the strength of the password. so let’s create Password Strength Checker using Javascript.
So let’s start with the code. But what I believe seeing a live server of the project will help while developing and understanding the code.
Live server:-
See the Pen
Untitled by Himanshu Singh (@himanishu)
on CodePen.
Code:-
Html is used for creating the layout/skeleton of the website. Here we are using the basic concepts of html like div, span, input, and strong.
The <strong> tag is used to define text with strong importance. The content inside is typically displayed in bold.
Tip: use the <b> tag to specify bold text without any extra importance!
We are using a password visibility toggle.
What is the strength of a password?
Password strength means size/bit of the password.
Password strength must good enough so, that it does not get easily hacked/cracked.
Good password strength is always must to keep the password.
What is good password strength ?
A good password must have at least one letter
A good password must have at least one capital letter
A good password must have at least one number
A good password must have at least one special letter such as, @, etc..,
A good password should not contain multiple identical consecutive characters
A good password should not be the same as the account name
A good password must be at least 8-12 characters long
A good password must not be a common password such as someone’s name, 1234, I love you, etc..,
Switch:-
Here for conditions, we are using a switch statement, instead of a switch statement you can use an if-else statement.
The switch statement is used to perform different actions based on different conditions.
The javascript switch statements the switch statement to select one of many code blocks to be executed.
Syntax
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
This is how it works:
The switch expression is evaluated once.
The value of the expression is compared with the values of each case.
If there is a match, the associated block of code is executed.
If there is no match, the default code block is executed.
The break keyword
When javascript reaches a break keyword, it breaks out of the switch block.
This will stop the execution inside the switch block.
It is not necessary to break the last case in a switch block. The block breaks (ends) there anyway.
The default keyword
The default keyword specifies the code to run if there is no case match:
Array:-
Using an array literal is the easiest way to create a javascript array.
Syntax:
const array_name = [item1, item2, ...];
Loop:-
One way to loop through an array is using a for loop:
Example
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
Adding array elements
The easiest way to add a new element to an array is using the push() method:
100+ Front-end Projects for Web developers (Source Code)
Example
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruit.
Javascript program
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Password Strength Validation Example</title>
<script>
function validatePassword(password) {
// Do not show anything when the length of password is zero.
if (password.length === 0) {
document.getElementById("msg").innerHTML = "";
return;
}
// Create an array and push all possible values that you want in password
var matchedCase = new Array();
matchedCase.push("[$@$!%*#?&]"); // Special Charector
matchedCase.push("[A-Z]"); // Uppercase Alpabates
matchedCase.push("[0-9]"); // Numbers
matchedCase.push("[a-z]"); // Lowercase Alphabates
// Check the conditions
var ctr = 0;
for (var i = 0; i < matchedCase.length; i++) {
if (new RegExp(matchedCase[i]).test(password)) {
ctr++;
}
}
// Display it
var color = "";
var strength = "";
switch (ctr) {
case 0:
case 1:
case 2:
strength = "Very Weak";
color = "red";
break;
case 3:
strength = "Medium";
color = "orange";
break;
case 4:
strength = "Strong";
color = "green";
break;
}
document.getElementById("msg").innerHTML = strength;
document.getElementById("msg").style.color = color;
}
function myFunction() {
var x = document.getElementById("pwd");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</head>
<body>
<strong>JavaScript Password Strength Validation Example</strong>
<div>
<label for="pwd">Password:</label>
<input type="password" id="pwd" onkeyup="validatePassword(this.value);"/><span id="msg"></span>
<input type="checkbox" onclick="myFunction()">Show Password
</div>
</body>
</html>
Note:- as, per the above program the javascript is directly used in integration with html, and here as the user will enter the password in the textbox he/she will come to know its strength of it.
The output of the above program.
So that’s it for this blog.I hope you learned a lot about toggling password visibility as well as the password strength checker. Comment down if you liked this blog and help us to reach more people, share this blog with your friends and let them know about this resourceful website.
If you have any queries or doubts related to the blog or content or any web dev-related stuff feel free to comment your query/doubt in the comment box and let us know your doubt and get a solution to that.
Written by Himanshu Singh