Password Validation

Password validation ensures your password meets security requirements. It helps protect your account from unauthorized access by enforcing strong password criteria. Passwords that do not meet these criteria are rejected, prompting users to create more secure passwords. Password must contains at least: 1 uppercase letter, 1 lowercase letter, 1 digit, 1 special symbol and mininmum 8 characters.

index.html
<!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="styles.css" />
  <script src="script.js"></script>
</head>
<body>
  <form method="post">
    <input type="password" name="pwd" id="pwd" placeholder="Enter your password" required oninput="passwordValidation()" class="input-pwd" /><br><br>
    <button type="button" name="submit">Submit</button>
  </form>
  <div>
    <p>Password must contain at least:</p>
    <ul>
      <li id="len">Minimum 8 characters</li>
      <li id="upper">1 uppercase letter</li>
      <li id="lower">1 lowercase letter</li>
      <li id="digit">1 digit</li>
      <li id="special">1 special character (!@#$%^&*)</li>
    </ul>
  </div>
</body>
</html>

styles.css
.input-pwd{
  padding: 10px;
  border-style: solid;
  border-color: aqua;
  outline-color: aqua;
  border-radius: 5px;
}

li{
  color: red;
}

script.js
function passwordValidation(){
  var pwd = document.getElementById("pwd").value
  //Check length of password
  if(pwd.length>=8){
    document.getElementById("len").style.color="green"
  } else {
    document.getElementById("len").style.color="red"
  }
  //Check uppercase letter
  var upper = new RegExp("[A-Z]")
  if(pwd.match(upper)){
    document.getElementById("upper").style.color="green"
  } else {
    document.getElementById("upper").style.color="red"
  }
  //Check lowercase letter
  var lower = new RegExp("[a-z]")
  if(pwd.match(lower)){
    document.getElementById("lower").style.color="green"
  } else {
    document.getElementById("lower").style.color="red"
  }
  //Check digit
  var digit = new RegExp("\\d")
  if(pwd.match(digit)){
    document.getElementById("digit").style.color="green"
  } else {
    document.getElementById("digit").style.color="red"
  }
  //Check symbol
  var special = new RegExp("\\W")
  if(pwd.match(special)){
    document.getElementById("special").style.color="green"
  } else {
    document.getElementById("special").style.color="red"
  }
}

RESULT
Posted by