Password Validation using JavaScript | Check if password includes digits, lowercase, uppercase and special characters | Show/Hide password.
Hello! Lets learn how we can make Password validation system using
javaScript.
Password Validation system is a concept where we validate if the password
entered contains numbers, lowercase and uppercase letters and special
characters. This project also include functionality to show or hide password
with one click.
Lets get started with the code!
HTML Code
<html>
<head>
<title>Password Validation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
</head>
<body>
<form>
<h1>Password Validation</h1>
<div class="form-group">
<input type="password" id="pass" placeholder="Enter password" required>
<i class="fas fa-eye fa-eye-slash"></i>
</div>
<small>Include <span id="number">numbers</span>, <span id="lcase">lowercase</span>, <span id="ucase">uppercase</span> and <span id="symbol">special chars</span>.</small>
</form>
</body>
</html>CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: verdana;
}
body {
min-height: 100vh;
background: #222;
color: #fff;
display: flex;
}
form {
margin: auto;
background: #111;
padding: 1.5rem 2.5rem;
}
.form-group {
margin-top: 2rem;
width: 100%;
background: #fff;
display: flex;
align-items: center;
overflow: hidden;
border-radius: 4px;
}
h1 {
text-align: center;
}
input {
flex: 1;
background: 0;
outline: 0;
border: 0;
padding: 0.8rem;
}
.fas {
background: #007bff;
padding: 0.8rem;
cursor: pointer;
}
small {
margin-top: 0.5rem;
display: inline-block;
font-size: .75rem;
color: #666;
}JavaScript Code
const pass = document.getElementById('pass');
const fas = document.querySelector('.fas');
fas.addEventListener('click', () => {
fas.classList.toggle('fa-eye-slash');
pass.type == 'password' ? pass.type = 'text' : pass.type = 'password';
})
pass.addEventListener('input', () => {
if (pass.value.length < 6 || pass.value.length > 15)
pass.style.background = 'rgba(255, 0, 0, .2)';
else
pass.style.background = '#fff';
if(pass.value.match(/[A-Z]/) == null) {
pass.style.background = 'rgba(255, 0, 0, .2)';
checkValid('ucase', false);
}
else {
checkValid('ucase', true);
}
if(pass.value.match(/[a-z]/) == null) {
pass.style.background = 'rgba(255, 0, 0, .2)';
checkValid('lcase', false);
}
else {
checkValid('lcase', true);
}
if(pass.value.match(/[0-9]/) == null) {
pass.style.background = 'rgba(255, 0, 0, .2)';
checkValid('number', false);
}
else {
checkValid('number', true);
}
if(pass.value.match(/[!@#$%^&*()]/) == null) {
pass.style.background = 'rgba(255, 0, 0, .2)';
checkValid('symbol', false);
}
else {
checkValid('symbol', true);
}
})
const checkValid = (selector, isIncluded) => {
const sel = document.getElementById(selector);
isIncluded ? sel.style.color = '#0f0' : sel.style.color = '#f00';
}Output
That is all! I hope you find this interesting. Thank you for visiting.