Scribd
Upload
9 views7 pages

Exp 8

Uploaded by

sonitraj8458
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views7 pages

Exp 8

Uploaded by

sonitraj8458
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

NAME – SONIT RAJ

CLASS – CS-B-04
ROLL NO – 124102065
EXPERIMENT 8
<!DOCTYPE html>
<html>
<head>
<title>Registration Page Validation</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
width: 350px;
text-align: center;
color: #333;
}
h2 {
margin-bottom: 20px;
}
label {
display: block;
text-align: left;
font-weight: bold;
margin: 10px 0 5px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
margin-bottom: 10px;
}
input[type="submit"] {
background-color: #ff5733;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
font-weight: bold;
transition: background 0.3s;
}
input[type="submit"]:hover {
background-color: #c70039;
}
</style>
<script>
function validateRegistration() {
let name = document.getElementById("name").value.trim();
let email = document.getElementById("email").value.trim();
let password = document.getElementById("password").value.trim();
let confirmPassword =
document.getElementById("confirmPassword").value.trim();
let errorMessage = "";

let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;


let passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])
[A-Za-z\d@$!%*?&]{8,}$/;

if (email === "") {


errorMessage += "Email is required.\n";
} else if (!emailPattern.test(email)) {
errorMessage += "Invalid email format.\n";
}
if (password === "") {
errorMessage += "Password is required.\n";
} else if (!passwordPattern.test(password)) {
errorMessage += "Password must be at least 8 characters long, include
at least one uppercase letter, one lowercase letter, one number, and one
special character.\n";
}
if (confirmPassword === "") {
errorMessage += "Confirm Password is required.\n";
} else if (confirmPassword !== password) {
errorMessage += "Passwords do not match.\n";
}
if (name !== "" && name.length < 2) {
errorMessage += "Name must be at least 2 characters long.\n";
}
if (errorMessage !== "") {
alert(errorMessage);
return false;
}
return true;
}
</script>
</head>
<body>
<div class="container">
<h2>Registration Page</h2>
<form onsubmit="return validateRegistration()">
<label for="name">Name:</label>
<input type="text" id="name" name="name">

<label for="email">Email:</label>
<input type="text" id="email" name="email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<label for="confirmPassword">Confirm Password:</label>


<input type="password" id="confirmPassword"
name="confirmPassword" required>

<input type="submit" value="Register">


</form>
</div>
</body>
</html>

You might also like