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;
  }
}
				
			

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"}`;
});
				
			

More JavaScript Tutorials On YouTube

Leave a Reply

Your email address will not be published. Required fields are marked *