Create a text file using any text editor. Name it as passwordvalidator.html. Type the below code on that file. Open the file using any web browser. You will see the result of the password validator project. It accepts input from user and validate it for the conditions given below the input field. The conditions that it checks are as below

  • Minimum length of password should be 8 characters
  • It should contain one uppercase letter
  • It should contain one lower case letter
  • It should contain one number
  • It should contain one symbol

Program :

<!DOCTYPE html>
<html>
<head>
<title>Password Validator JavaScript Project</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
input[type=”password”],input[type=”text”] {
width: 100%;
padding: 10px;
border: 1px solid #CCC;
border-radius: 5px;
box-sizing: border-box;
}

.container {
padding: 20px;
margin-left:30%;
margin-right:30%;
}

#inputdata, #message {
background: #EEE;
color: #000;
position: relative;
padding: 20px;
margin-top: 10px;
}

#message p {
font-size: 15px;
}

h3 {
text-align:center;
}
.valid {
color: green;
}
.invalid {
color: red;
}
</style>
</head>
<body>
<div class=”container”>
<div id=”inputdata”>
<label for=”pwd”>Password:</label><br>
<input type=”password” id=”pwd” name=”pwd” placeholder=”Enter a strong password”><br>
<input type=”checkbox” id=”shwpwd” onclick=”showPassword()”><label for=”shwpwd”>Show Password</label>
</div>

<div id=”message”>
<h3>Password Checking Status</h3>
<p style=”text-align:center;margin-top:-15px;”>(All the red lines should be greeen)</p>
<p id=”lengthcheck”><b>Number of Characters entered are :</b></p>
<p id=”pwdlengthcheck” class=”invalid”><b>Minimum length of password should be 8 characters</b></p>
<p id=”uppercheck” class=”invalid”><b>It should contain at least one uppercase letter</b></p>
<p id=”lowercheck” class=”invalid”><b>It should contain at least one lower case letter</b></p>
<p id=”numbercheck” class=”invalid”><b>It should contain at least one number</b></p>
<p id=”symbolcheck” class=”invalid”><b>It should contain at least one symbol</b></p>
</div>
</div>

<script>
const myInput = document.getElementById(‘pwd’);
const lengthcheck = document.getElementById(‘lengthcheck’);
const pwdlengthcheck = document.getElementById(‘pwdlengthcheck’);
const uppercheck = document.getElementById(‘uppercheck’);
const lowercheck = document.getElementById(‘lowercheck’);
const numbercheck = document.getElementById(‘numbercheck’);
const symbolcheck = document.getElementById(‘symbolcheck’);

myInput.addEventListener(‘keyup’, function(event){
const password = myInput.value;
lengthCheck(password);
lengthValidator(password);
upperCheck(password);
lowerCheck(password);
numberCheck(password);
symbolCheck(password);
});

function lengthCheck(pass){
const len = pass.length;
lengthcheck.innerText = ‘Number of Characters: ‘+ len;
};

function lengthValidator(pass){
if (pass.length >= 8) {
pwdlengthcheck.classList.remove(‘invalid’);
pwdlengthcheck.classList.add(‘valid’);
} else {
pwdlengthcheck.classList.remove(‘valid’);
pwdlengthcheck.classList.add(‘invalid’);
}
};

function upperCheck(pass){
const upperCaseLetters = /[A-Z]/g;
if (pass.match(upperCaseLetters)) {
uppercheck.classList.remove(‘invalid’);
uppercheck.classList.add(‘valid’);
} else {
uppercheck.classList.remove(‘valid’);
uppercheck.classList.add(‘invalid’);
}
};

function lowerCheck(pass){
const lowerCaseLetters = /[a-z]/;
if (pass.match(lowerCaseLetters)) {
lowercheck.classList.remove(‘invalid’);
lowercheck.classList.add(‘valid’);
} else {
lowercheck.classList.remove(‘valid’);
lowercheck.classList.add(‘invalid’);
}
};

function numberCheck(pass){
const numbers = /[0-9]/g;
if (pass.match(numbers)) {
numbercheck.classList.remove(‘invalid’);
numbercheck.classList.add(‘valid’);
} else {
numbercheck.classList.remove(‘valid’);
numbercheck.classList.add(‘invalid’);
}
};

function symbolCheck(pass){
const symbols = /[$-/:-?{-~!”^_@&+#%`\[\]]/;
if (pass.match(symbols)) {
symbolcheck.classList.remove(‘invalid’);
symbolcheck.classList.add(‘valid’);
} else {
symbolcheck.classList.remove(‘valid’);
symbolcheck.classList.add(‘invalid’);
}
};

function showPassword(){
var x = document.getElementById(“pwd”);
if (x.type === “password”) {
x.type = “text”;
} else {
x.type = “password”;
}
}
</script>

</body>
</html>