Module No:01 Date: 07-12-2024
A). Develop a static web application and deploy it in any one of the web servers
(WAMP/Apache
Tomcat/IIS).
signup.html:
<html>
<head>
<title>Static Page </title>
</head>
<body>
<form>
<h1> Student Registration form using table in HTML </h1>
<table>
<tr>
<th> User Name </th>
<th> <input type='text' name='username' /> </th>
<th> (Max 25 charecters) </th>
</tr>
<tr>
<th> Password</th>
<th> <input type='password' name='password' /> </th>
<th> (Max 25 charecters) </th>
</tr>
<tr>
<th> Confirm Password</th>
<th> <input type='password' name='confirm-password' /> </th>
Laki Reddy Bali Reddy College of Engineering-Dept.of CSE Reg.No:22761A05F3
Module No:01 Date: 07-12-2024
<th> (Max 25 charecters) </th>
</tr>
<tr>
<th> Email ID</th>
<th> <input type='email' name='email' /> </th>
<th> </th>
</tr>
<tr>
<th> Mobile Number </th>
<th> <input type='text' name='mobile' /> </th>
<th> (Max 25 charecters) </th>
</tr>
</table>
</form>
</body>
</html>
Laki Reddy Bali Reddy College of Engineering-Dept.of CSE Reg.No:22761A05F3
Module No:01 Date: 07-12-2024
Output:
Laki Reddy Bali Reddy College of Engineering-Dept.of CSE Reg.No:22761A05F3
Module No:01 Date: 07-12-2024
B). Develop a JavaScript program to validate the client-side user input data (Example: username,
password, email, phone number).
Example1.html
<html>
<head>
<title>Static Page </title>
</head>
<body>
<form name="registrationForm" onsubmit="return validateForm()">
<h1> Student Registration form using table in HTML </h1>
<table>
<tr>
<th> User Name </th>
<th> <input type='text' name='username' maxlength="25" required /> </th>
<th> (Max 25 charecters) </th>
</tr>
<tr>
<th> Password</th>
<th> <input type='password' name='password' maxlength="25" required /> </th>
<th> (Max 25 charecters) </th>
</tr>
<tr>
<th> Confirm Password</th>
<th> <input type='password' name='confirmPassword' maxlength="25" required /> </th>
<th> (Max 25 charecters) </th>
Laki Reddy Bali Reddy College of Engineering-Dept.of CSE Reg.No:22761A05F3
Module No:01 Date: 07-12-2024
</tr>
<tr>
<th> Email ID</th>
<th> <input type='email' name='email' maxlength="25" required /> </th>
<th> </th>
</tr>
<tr>
<th> Mobile Number </th>
<th> <input type='tel' name='mobile' maxlength="25" required /> </th>
<th> (Max 25 charecters) </th>
</tr>
<tr>
<th><button type="submit">Submit </button></th>
<th><button type="reset">Reset </button></th>
</tr>
</table>
</form>
<script>
function validateForm() {
const username = document.forms["registrationForm"]["username"].value;
const email = document.forms["registrationForm"]["email"].value;
const password = document.forms["registrationForm"]["password"].value;
const confirmPassword = document.forms["registrationForm"]["confirmPassword"].value;
const phone = document.forms["registrationForm"]["mobile"].value;
const usernameRegex = /^(?=.*[a-zA-Z]).{6,25}$/;
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,25}$/;
Laki Reddy Bali Reddy College of Engineering-Dept.of CSE Reg.No:22761A05F3
Module No:01 Date: 07-12-2024
const phoneRegex = /^\d{10}$/;
if (!usernameRegex.test(username)) {
alert("Username must be 6-25 characters long and include at least one special character and
one numerical value.");
return false;
if (!passwordRegex.test(password)) {
alert("password must be 8-25 characters long and include at least one special character and
one numerical value and upper case and lower case.");
return false;
if (password !== confirmPassword) {
alert("Passwords do not match.");
return false;
if (!phoneRegex.test(phone)) {
alert("Phone number must be exactly 10 digits.");
return false;
alert("Form submitted successfully!");
return true;
</script>
</body>
</html>
Laki Reddy Bali Reddy College of Engineering-Dept.of CSE Reg.No:22761A05F3
Module No:01 Date: 07-12-2024
Output :
Laki Reddy Bali Reddy College of Engineering-Dept.of CSE Reg.No:22761A05F3
