Create Password Validation Mini-Project In HTML CSS and JavaScript
Password validation is the process of verifying whether a password meets certain criteria set by an application or system. Well-validated passwords are essential for protecting sensitive information from unauthorized access.
Here are some common criteria used in password validation : Complexity , Length , No Personal Information , Expiration and Change Policies , Lockout After Failed Attempts , Two-Factor Authentication (2FA) or Multi-Factor Authentication (MFA) .
Below an Output :
Let's Make Attractive Design Using HTML& CSS
First we need to create basic starting template with required links of CSS , CDN links in head section of HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Validation </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body> <script src="script.js" defer data-deferred="1"></script> <script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script></body>
</html>
<div class="wrapper">
<div class="password-box">
<input type="password" placeholder="Create password">
<i class="fa-solid fa-eye"></i>
</div>
<div class="content">
<p>Password must contains</p>
<ul class="requirement-list">
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 8 characters length</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 1 number (0...9)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 1 lowercase letter (a...z)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 1 special symbol (!...$)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 1 uppercase letter (A...Z)</span>
</li>
</ul>
</div>
</div>
Here CSS Code For Attractive Design
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #2C3E50;
}
.wrapper {
width: 450px;
overflow: hidden;
padding: 28px;
border-radius: 8px;
background:#34495E;
box-shadow: 0 10px 25px rgba(0,0,0,0.06);
border:1px solid rgba(255,255,255,0.1);
}
.wrapper .password-box {
height: 65px;
width: 100%;
position: relative;
}
.password-box input {
width: 100%;
height: 100%;
outline: none;
padding: 0 17px;
font-size: 1rem;
border-radius: 5px;
border: 1px solid #999;
background-color: #34495E;
color:#fff;
}
.password-box input:focus {
padding: 0 16px;
border: 1px solid #00b4fc;
}
.password-box i {
right: 18px;
top: 50%;
font-size: 1.2rem;
color: #00b4fc;
cursor: pointer;
position: absolute;
transform: translateY(-50%);
}
.wrapper .content {
margin: 20px 0 10px;
}
.content p {
color: #ffffff;
font-size: 1rem;
}
.content .requirement-list {
margin-top: 20px;
}
.requirement-list li {
font-size: 1rem;
list-style: none;
display: flex;
align-items: center;
margin-bottom: 15px;
}
.requirement-list li i {
width: 20px;
color: #fff;
font-size: 0.5rem;
}
.requirement-list li.valid i {
font-size: 1.1rem;
color: #00b4fc;
}
.requirement-list li.valid span {
color: #00b4fc;
}
.requirement-list li span {
margin-left: 12px;
color: #d8d8d8;
}
/* .requirement-list li.valid span {
color: #999;
} */
@media screen and (max-width: 500px) {
body, .wrapper {
padding: 15px;
}
.wrapper .password-box {
height: 55px;
}
.password-box input, .content p {
font-size: 1.15rem;
}
.password-box i, .requirement-list li {
font-size: 1.1rem;
}
.requirement-list li span {
margin-left: 7px;
}
}
More Tutorials On YouTube Check Now:
What We Learn In this Blog?
What is Regular Expressions???
Regular expressions (regex) in JavaScript are a powerful tool used for pattern matching within strings. They are used to describe a pattern of characters. With regex, you can search, match, and manipulate text based on specific patterns.
here are some examples of commonly used regex methods in JavaScript:
test()
The test() method checks if a string contains a match for a regex pattern and returns true or false.
const pattern = /hello/;
const str = 'hello world';
const result = pattern.test(str);
console.log(result); // Output: true
What is forEach Loop in JavaScript?
In JavaScript, the forEach() loop and It used to iterate over elements of an array, allowing you to execute once for each element in the array. forEach() method is not executed for empty elements.
let numbers = [1, 2, 3, 4, 5];
// Using forEach to iterate through the array
numbers.forEach(function(number) {
console.log(number); // Print each number in the array
});
Let's Move On Javascript Project :
First of all we need to Retrieve element in JavaScript using queryselector method that allows you to select and retrieve elements from the DOM(Document Object Model) .
after Retrieve Elements from DOM Create Array Of Object. In this Project we Use Regular Expressions in Objects. We Create Most Useful Validation like Minimum of 8 Characters , At least One Number , At least one lowercase letter , At least one special character and At least one uppercase letter .
const passwordInput = document.querySelector(".password-box input");
const eyeIcon = document.querySelector(".password-box i");
const requirementList = document.querySelectorAll(".requirement-list li");
// An array of password requirements with corresponding
// regular expressions and index of the requirement list item
const requirements = [
{ regex: /.{8,}/, index: 0 }, // Minimum of 8 characters
{ regex: /[0-9]/, index: 1 }, // At least one number
{ regex: /[a-z]/, index: 2 }, // At least one lowercase letter
{ regex: /[^A-Za-z0-9]/, index: 3 }, // At least one special character
{ regex: /[A-Z]/, index: 4 }, // At least one uppercase letter
]
passwordInput.addEventListener("keyup", (e) => {
requirements.forEach(item => {
// Check if the password matches the requirement regex
const isValid = item.regex.test(e.target.value);
const requirementItem = requirementList[item.index];
// Updating class and icon of requirement item if requirement matched or not
if (isValid) {
requirementItem.classList.add("valid");
requirementItem.firstElementChild.className = "fa-solid fa-check";
} else {
requirementItem.classList.remove("valid");
requirementItem.firstElementChild.className = "fa-solid fa-circle";
}
});
});
eyeIcon.addEventListener("click", () => {
// Toggle the password input type between "password" and "text"
passwordInput.type = passwordInput.type === "password" ? "text" : "password";
// Update the eye icon class based on the password input type
eyeIcon.className = `fa-solid fa-eye${passwordInput.type === "password" ? "" : "-slash"}`;
});
