5.
<![CDATA[
5. Design signup form to validate username, password, and phone numbers etc. using Java script
<!DOCTYPE html>
<html>
<head>
<title>Signup Form</title>
<style>
*{
background-color:#cc044a;
text-align:center;
padding:15px;
color:white;
}
fieldset{
background-color:white;
border-radius:10px;
}
</style>
<script type="text/javascript">
function validateForm() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var phoneNumber = document.getElementById('phone').value;
// Validate username
if (username.length < 5) {
alert("Username must be at least 5 characters long");
return false;
}
// Validate password
if (password.length < 8) {
alert("Password must be at least 8 characters long");
return false;
}
// Validate phone number
var phoneRegex = /^\d{10}$/; // Regular expression for 10-digit phone number
if (!phoneRegex.test(phoneNumber)) {
alert("Phone number must be a 10-digit number");
return false;
}
// If all validations pass, form is valid
alert("Signup successful!");
return true;
}
</script>
</head>
<body>
<h1 style="size:50px">Registration</h1>
<fieldset>
<legend>Personal Details</legend>
<form onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone"><br><br>
<input type="submit" value="Sign Up">
</fieldset>
</form>
</body>
</html>
]]>