Practical No 12
Q.1) Program to validate name, age, date of birth, email and
password using regular expression.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation with Regular Expressions</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: auto;
padding: 20px;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
}
input {
padding: 10px;
margin-top: 5px;
font-size: 16px;
}
.error {
color: red;
font-size: 14px;
display: none;
}
button {
padding: 10px;
margin-top: 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Form Validation using Regular Expressions</h1>
<form id="validationForm" onsubmit="return validateForm()">
<!-- Name Input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
<span class="error" id="nameError">Name must contain only letters and spaces.</span>
<!-- Age Input -->
<label for="age">Age:</label>
<input type="text" id="age" name="age" placeholder="Enter your age">
<span class="error" id="ageError">Age must be a number between 1 and 100.</span>
<!-- Date of Birth Input -->
<label for="dob">Date of Birth (YYYY-MM-DD):</label>
<input type="text" id="dob" name="dob" placeholder="Enter your date of birth">
<span class="error" id="dobError">Please enter a valid date in YYYY-MM-DD format.</span>
<!-- Email Input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
<span class="error" id="emailError">Please enter a valid email address.</span>
<!-- Password Input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password">
<span class="error" id="passwordError">Password must be at least 6 characters, include a letter
and a number.</span>
<!-- Submit Button -->
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
// Clear previous errors
document.querySelectorAll('.error').forEach(function(error) {
error.style.display = 'none';
});
let isValid = true;
// Validate Name (only letters and spaces)
let name = document.getElementById("name").value;
let namePattern = /^[a-zA-Z\s]+$/;
if (!namePattern.test(name)) {
document.getElementById("nameError").style.display = 'inline';
isValid = false;
}
let age = document.getElementById("age").value;
let agePattern = /^(?:[1-9]|[1-9][0-9]|100)$/;
if (!agePattern.test(age)) {
document.getElementById("ageError").style.display = 'inline';
isValid = false;
}
let dob = document.getElementById("dob").value;
let dobPattern = /^\d{4}-\d{2}-\d{2}$/;
if (!dobPattern.test(dob)) {
document.getElementById("dobError").style.display = 'inline';
isValid = false;
}
let email = document.getElementById("email").value;
let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
document.getElementById("emailError").style.display = 'inline';
isValid = false;
}
let password = document.getElementById("password").value;
let passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;
if (!passwordPattern.test(password)) {
document.getElementById("passwordError").style.display = 'inline';
isValid = false;
}
return isValid; // Prevent form submission if validation fails
}
</script>
</body>
</html>
Output:
