0% found this document useful (0 votes)
68 views6 pages

WD - Practical 9,10,11

The document describes three JavaScript code examples for validating user registration form fields. The first validates the name field requires alphabet characters only and a minimum length of 6. The second validates the password field requires a minimum length of 6. The third validates the email field requires a valid email format and the phone field requires exactly 10 digits. Each example provides the HTML form, CSS styles, and JavaScript code to validate the fields.

Uploaded by

mittalmegha645
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
0% found this document useful (0 votes)
68 views6 pages

WD - Practical 9,10,11

The document describes three JavaScript code examples for validating user registration form fields. The first validates the name field requires alphabet characters only and a minimum length of 6. The second validates the password field requires a minimum length of 6. The third validates the email field requires a valid email format and the phone field requires exactly 10 digits. Each example provides the HTML form, CSS styles, and JavaScript code to validate the fields.

Uploaded by

mittalmegha645
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/ 6

Practical-10

Problem Statement:
Design the following static webpages using CSS border properties.
Methodology:
Write about CSS background and border.

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>CSS Background and Border</title>
<style type="text/css">
*,html{ margin:0px; padding:0px }
body{ background:url('img/web_bkg.jpg') #145CA6 no-repeat right
top}
main{ width:900px;
height:1000px;
margin:0 auto;
background:url('img/main_bkg.jpg');
background-size:cover;
border:10px solid red;
border-radius: 10px;
border-image: url('img/border_img.jpg') 10 round;
//border-image: url('img/border_img.jpg') 1 stretch;
}

/linear-gradient background/
/*main{ width:900px;
height:1000px;
margin:0 auto;
//background-image: linear-gradient(red , yellow);
background-image: linear-gradient(180deg, red, yellow, green);
// background-image: linear-gradient(red, yellow, green);
//background-image: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
//background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
// background-image: repeating-linear-gradient(red, yellow 10%, green
20%);
}*/
/radial-radialnt background with text and box shadow/

/*main{
width:900px;
height:1000px;
margin:0 auto;
//background-image: radial-
gradient(blue,green,yellow,black);
//background-image: radial-gradient(red 5%, yellow 15%, green 60%);
background-image: radial-gradient(circle, #999, #888, #CCC);

text-shadow: #F04 1px 5px 8px; box-shadow: #F04 10px 0px 20px;

}*/
</style>
</head>
<body>
<main>
<h1>Welcome on my page</h1>
</main>

</body>
</html>

Practical-11
Problem Statement:
Write JavaScript to validate the following fields of the above registration page.
1. Name (Name should contains alphabets and the length should not be less than 6 characters)
2. Password (Password should not be less than 6 characters length)

Methodology:
Write about javascript &form validation

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>ABES Engineering College | Login</title>
<style type="text/css">
body{ margin:0px; padding:0px }
*,html{ margin:0px; padding:0px }
main{ width:100%; height: auto; margin:0px auto; }
table{ margin:0px auto; }
table td{ text-align:center; }
.box{ width:400px; padding:5px; }
.btn{ width:100px; padding:5px }
</style>
</head>
<body>
<main><!--login-->
<form action="" method="get">
<table border="0" cellspacing="20">
<tr>
<th>Login</th>
<td><strong>JS Validation for User Name and
Password</strong></td>
</tr>
<tr><td><label>User Name :</label></td>
<td><input type="text" placeholder="Enter User Name"
class="box" id='userInput'></td>
</tr>
<tr>
<td><label>Password :</label></td>
<td><input type="Password" placeholder="Enter Password"
id="userPassword" class="box" minlength="6" ></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" class="btn"
onclick='validateForm()'>
<input type="reset" class="btn">
</td>
</tr>
</table>
</form>
</main><!--login-->
<script type="text/javascript">
function validateForm(){
var txtInput=document.getElementById('userInput').value;
var alfaTxt=/^[a-zA-Z]+$/;
var pwd=document.getElementById('userPassword').value;
if((!txtInput.match(alfaTxt)) || txtInput.length<6)
{
alert("Please Enter Only Charcters, length of 6 ");
}
else if(pwd.length<6){
alert("Please Enter Password atleast length of 6");
}
else{
alert('Success Data');
}
}
</script>
</body>
</html>

Practical-12
Problem Statement:
Write JavaScript to validate the following fields of the above registration page.
1. E-mailid (should not contain any invalid and must follow the standard
pattern([email protected])
2. Phone Number(Phone number should contain 10 digits only)

Methodology:
Write about javascript function and event handling

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>ABES Engineering College | Login</title>
<style type="text/css">
body{ margin:0px; padding:0px }
*,html{ margin:0px; padding:0px }
main{ width:100%; height: auto; margin:0px auto; }
table{ margin:0px auto; }
table td{ text-align:center; }
.box{ width:400px; padding:5px; }
.btn{ width:100px; padding:5px }
</style>
</head>
<body>
<main><!--login-->
<form action="" method="get">
<table border="0" cellspacing="20">
<tr>
<th>Login</th>
<td><strong>JS Validation for User E-mail and
Phone</strong></td>
</tr>
<tr>
<td><label>User Name :</label></td>
<td><input type="email" placeholder="Enter your E-mail"
class="box" id='userMail'></td>
</tr>
<tr>
<td><label>Phone:</label></td>
<td><input type="text" placeholder="Enter your Number"
maxlength="10" id="userPhone" class="box"></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" class="btn"
onclick='validateForm()'>
<input type="reset" class="btn">
</td>
</tr>
</table>
</form>
</main><!--login-->
<script type="text/javascript">
function validateForm(){
var mailInput=document.getElementById('userMail').value;
var mailformat = /^\w+([\.-]?\w+)@\w+([\.-]?\w+)(\.\w{2,3})
+$/;
var phoneInput=document.getElementById('userPhone').value;

if(!mailInput.match(mailformat))
{
alert("Please Enter Correct E-mail Id ");
}
else if(phoneInput.length<10){
alert("Please Enter Valide 10 Digit Number");
}
else{
alert('Success Data');
}
}
</script>
</body>
</html>

You might also like