This tutorial, "How To Create Password Validation Check In JavaScript," is your gateway to understanding and implementing effective password validation in your web applications. Whether you're building a simple website, an e-commerce platform, or a complex web service, ensuring that user passwords meet specific criteria is a fundamental aspect of user authentication.
Learning how to create user authentication features is a valuable skill that can be applied to a wide range of web projects, from personal websites to e-commerce platforms and social networks. By the end of this tutorial, you will have gained hands-on experience in developing a secure and user-friendly web application.
In this guide, we will delve into the principles of password validation, explore JavaScript functions to enforce password requirements, and learn how to provide user-friendly feedback. By the end of this tutorial, you'll be well-equipped to enhance the security of your web applications by creating a robust password validation check.
So, let's embark on this exciting journey of web development and enhance your skill set in HTML, CSS, and JavaScript.
If interested in watching the video before running the code below, you can click the play button to get started.
First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.
Create a file called script.js for the JavaScript code.
Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div class="work">
<input type="password" class="password_input">
<img src="eye-open.png" alt="" class="eye">
</div>
<div class="validate">
<div class="capital">
<img src="close-block.png" alt=""><span>At least one capital letter</span>
</div>
<div class="lower">
<img src="close-block.png" alt=""><span>At least one lower letter</span>
</div>
<div class="number">
<img src="close-block.png" alt=""><span>At least one number</span>
</div>
<div class="special_char">
<img src="close-block.png" alt=""><span>At least one special character</span>
</div>
<div class="length">
<img src="close-block.png" alt=""><span>At least one 8 character</span>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Trade Gothic Bold", sans-serif;
background: #ff1493;
}
.work {
position: relative;
width: 350px;
}
.work input {
width: 100%;
padding: 15px;
outline: none;
font-size: 17px;
border-radius: 3px;
border: none;
}
.work img {
position: absolute;
top: 50%;
right: -6px;
transform: translateY(-50%);
cursor: pointer;
width: 23px;
/}
.validate {
background: #ff69b4;
width: 360px;
margin: 30px 0;
padding: 10px;
border-radius: 5px;
color: #fff;
/*Do this after everything bro*/
display: none;
}
.validate div {
display: flex;
align-items: center;
}
.validate div img {
width: 35px;
margin-right: 10px;
}
const eyeBtn = document.querySelector(".eye");
const passwordInput = document.querySelector(".password_input");
eyeBtn.addEventListener("click", e => {
if(passwordInput.type === "password") {
passwordInput.type = "text";
eyeBtn.src = "eye-close.png";
}else {
passwordInput.type = "password";
eyeBtn.src = "eye-open.png";
}
})
let uppercase = /[A-Z]/g
let lowercase = /[a-z]/g
let number = /[0-9]/g
let specialCharacter = /[!"#$]/g
let length = 8;
passwordInput.addEventListener("input", e => {
let pass_value = passwordInput.value;
if(pass_value.match(uppercase)) {
let capital = document.querySelector(".capital");
capital.firstElementChild.src = "check-block.png";
capital.lastElementChild.style.color = "rgba(255,255,255,.5";
}
if(pass_value.match(lowercase)) {
let lower = document.querySelector(".lower");
lower.firstElementChild.src = "check-block.png";
lower.lastElementChild.style.color = "rgba(255,255,255,.5";
}
if(pass_value.match(number)) {
let number = document.querySelector(".number");
number.firstElementChild.src = "check-block.png";
number.lastElementChild.style.color = "rgba(255,255,255,.5";
}
if(pass_value.match(specialCharacter)) {
let specialChar = document.querySelector(".special_char");
specialChar.firstElementChild.src = "check-block.png";
specialChar.lastElementChild.style.color = "rgba(255,255,255,.5)";
}
if(pass_value.length === length) {
let length = document.querySelector(".length");
length.firstElementChild.src = "check-block.png";
length.lastElementChild.style.color = "rgba(255,255,255,.5";
}
})
passwordInput.addEventListener("focus", e => {
document.querySelector(".validate").style.display = "block";
})
0 Comments
We are happy to hear from you.