- Home
- JavaScript
- Learn Password Validation Proj ...
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.
Password Validation
Password must contains
-
At least 8 characters length
-
At least 1 number (0...9)
-
At least 1 lowercase letter (a...z)
-
At least 1 special symbol (!...$)
-
At least 1 uppercase letter (A...Z)
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:
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"}`;
});
More JavaScript Tutorials On YouTube
Recent Post
Var keyword in C#
- May 8, 2024
- 4 min read
What is Cloud Computing ? Definition &
- April 2, 2024
- 4 min read
Devika – An Open-Source AI Software Engineer
- March 27, 2024
- 3 min read