Form Validation

FORM VALIDATION (HTML)
<html>
<head>
<title> Form Validation </title>
<style type="text/css">
h1 {
text-align: center;
font-family: "Arial";
background: #0000FF;
color: #FFFFFF;
}
p{
text-align: center;
}
table {
font-family: "Courier New";
}
td.left {
valign: top;
text-align: right;
}
#errors {
color: #FF0000;
}
</style>
<script type="text/javascript">
function checkEntries (validation) {

var errors = "";
var nameExp = /[\\\/:*?;,"'&<>|!@#$%^(){}.+=\-_`~\[\]]/;
var nameExp1 = /[0-9]+/;
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
//check entry on NAME
if (validation.name1.value == ""){
errors += "Please fill up your name. <br>";
}
if (validation.name1.value.length <= 5){
errors += "Name must contain more than five characters. <br>";
}
if (validation.name1.value.match(nameExp)){
errors += "Name cannot contain special characters.<br>";
}
if (validation.name1.value.match(nameExp1)){
errors += "Name cannot contain numbers.<br>";
}
//check entry on email
if (validation.email.value.match(emailExp)){
}else{
errors += "Enter valid email. <br>";
}
//check entry on address
if (validation.address.value == ""){
errors += "Please enter your address. <br>";
}
//check entry for country
if (validation.country.selectedIndex==0){
errors += "Please select a country. <br>";
}
//check entry on gender
if ((validation.gender[0].checked == false) && (validation.gender[1].checked == false)) {
errors += "Please choose a gender. <br> \n";
}
if ((validation.status[0].checked == false)&&(validation.status[1].checked == false)&&
(validation.status[2].checked == false)&&(validation.status[3].checked == false)) {
errors += "Please choose a status. <br>";
}
if (errors!=""){
document.getElementById('errors').innerHTML = errors;
}
if (errors==""){
document.getElementById('errors').innerHTML = errors;
}
}
</script>
</head>
<body>
<h1> Application Form </h1>
<p> Please accomplish the following form. Avoid leaving any space unanswered. </p>
<form name="validation" action="" method=post>

<center>
<table>
<tr>
<td valign="top" class="left"> Name: </td>
<td> <input type="text" name="name1" size="30" maxlength="100"> <p id="nameError"> </p> </td>
</tr>
<tr>
<td valign="top" class="left"> Email Address: </td> <td> <input type="text" name="email" size="30" maxlength="50"> </td>
</tr>
<tr>
<td valign="top" class="left"> Address: </td> <td> <textarea name="address" rows="1" cols="30"></textarea> <br> </td>
</tr>
<tr>
<td valign="top" class="left"> Country: </td> <td> <select name = "country" size = "1">
<option value = "select"> Please select a country </option>
<option value = "Japan"> Japan </option>
<option value = "Philippines"> Philippines </option>
<option value = "United States"> United States </option>
<option value = "Venezuela"> Venezuela </option>
</select> </td>
</tr>
<tr>
<td valign="top" class="left"> Gender: </td>
<td> <input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</td>
</tr>
<tr>
<td valign="top" class="left"> Status: </td>
<td> <input type="checkbox" name="status" value="single"> Single <br>
<input type="checkbox" name="status" value="married"> Married <br>
<input type="checkbox" name="status" value="widowed"> Widowed <br>
<input type="checkbox" name="status" value="annulled"> Annulled </td>
</tr>
<tr>
<td valign="top" class="left"> <button type="button" onClick="checkEntries(validation)"> Submit </button> </td>
<td> <button type="reset"> Reset </button> </td>
</tr>
<tr>
<td colspan="2"> <p id = "errors" > </p> </td>
</tr>
</table> </center>
</form>
</body>
</html>
PASSWORD CONFIRMATION
<html>
<head>
<title> Password Validation </title>
<script type="text/javascript" src="pwordChange.js"> </script>
</head>
<body>
<form name="password" action="" method="post">
<table>
<tr>
<td> Enter password: </td>
<td> <input type="password" name="pwordOld"> </td>
</tr>
<tr>
<td> Enter new password: </td>
<td> <input type="password" name="pwordNew"> </td>
</tr>
<tr>
<td> Confirm new password: </td>
<td> <input type="password" name="pwordConfirm"> </td>
</tr>
<tr>
<td colspan="2"> <button type="button" onClick="validatePassword(password)"> Submit </button>
</tr>
</table>
</form>
</body>
</html>
function validatePassword(pw) {
if (pw.pwordOld.value=="") {
alert("Enter current pasword!");
}
else {
if (pw.pwordNew.value!=pw.pwordConfirm.value){
alert("New password and password confirmation do not match!");
password.reset();
}
}
}
COMPARISON OFNUMBERS
<html>
<head>
<title> Comparison </title>
<script type="text/javascript" src="compare.js"> </script>
</head>
<body>
<form name="comparison" method="post" action="">
Enter first number: <input type="text" name="first"> <br>
Enter second number: <input type="text" name="second"> <br>
<button type="button" onClick="compare(comparison)"> Compare </button> <br>
<p id="result"> <p>
</form>
</body>
</html>
function compare(comparison) {
var firstvalue = comparison.first.value;
var secondvalue = comparison.second.value;
var numbers = /^-?[0-9]+$/;
if (firstvalue.match(numbers)&&secondvalue.match(numbers)){
if (parseInt(firstvalue)>parseInt(secondvalue)) {
document.getElementById('result').innerHTML = firstvalue + " is greater.";
}
if (parseInt(firstvalue)<parseInt(secondvalue)) {
document.getElementById('result').innerHTML = secondvalue + " is greater.";
}
if (parseInt(firstvalue)==parseInt(secondvalue)) {
document.getElementById('result').innerHTML = "These numbers are equal.";
}
}
else {
document.getElementById('result').innerHTML = "Please enter integers only.";
}
}
MILEAGE
<html>
<head>
<title> Mileage </title>
<script type="text/javascript" src="mileage.js"> </script>
<head>
<body>
<form name="mile" method="post" action="">
<button type="button" onClick="miles(mile)"> Enter data </button> <br>
<table id='tab' border="1" style= "text-allign: left"> </table>
<p id="result"> </p>
</form>
<body>
</html>
function miles(){
var trips = parseInt(prompt("Enter number of trips:", "1"));
var x = 0, total1 = 0, total2 = 0, ave;
var usage = new Array(100);
var miles = new Array(100);
var mileage = new Array(100);
var mileageTable = "<tr> <th> Trip No. </th> <th> Miles (miles) </th> <th> Usage (gallons)</th> <th>Mileage (miles/gallon)</t h> </tr>";
for (x=0; x<trips; x++){

usage[x] = parseInt(prompt("Enter usage for trip " + (x+1), "1"));
if (usage[x] > 30) {
x--;
continue;
}
miles[x] = parseInt(prompt("Enter distance traveled for trip " + (x+1), "1"));
mileage[x] = miles[x] / usage[x];
//total = total + mileage[x];
total1 = total1 + miles[x];
total2 = total2 + usage[x];
mileageTable = mileageTable + "<tr><td> " + (x+1) + "</td><td>"+miles[x]+"</td><td>"+usage[x]+"</td><td>" + mileage[x] + "</t d>";
}
ave = total1 / total2;
document.getElementById('tab').innerHTML = mileageTable;
document.getElementById('result').innerHTML = "No. of Trips = " + trips + "<br>Combined = " + ave + " miles/gallon";
}
TABLE (1, 10, 100, 1000, 10000)
<html>
<head>
<title> Table </title>
<script type="text/javascript" src="table.js"> </script>
</head>
<body>
<form name="table" method="post" action="">
<button type="button" onClick="loop(table)"> Enter N. </button> <br>
<table id="result" border="1"> </table>
</form>
</body>
</html>
function loop(val) {
var num = prompt("Enter the number of rows: ", "0");
var input = new Array(100);
var x, x1, x2, x3, x4;
//var table="";
var table = "<tr> <th> N </th> <th> 10*N </th> <th> 100*N </th> <th> 1000*N </th> </tr>" ;
//var table = "<tr> <td> N </td> <td> 10*N </td> <td> 100*N </td> <td> 1000*N </td> </tr>" ;
for (x=0; x<num; x++){
x1=x+1;
x2=(x+1)*10;
x3=(x+1)*100;
x4=(x+1)*1000;
table = table + "<tr> <td> " + x1 + "</td> <td>"+ x2 + "</td> <td>" + x3 + "</td> <td>" + x4 + "</td> </tr>";
}
//table = table + "</table>";
document.getElementById('result').innerHTML = table;
}
RESUME (CSS ACTIVITY)
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
<title> Jun Rangie Obispo </title>
</head>
<body>
<h1> Jun Rangie Obispo </h1>
<div>
<p> <font face = "Arial" size = "4" color = "blue">
Personal Details </font> <br>
Gender: Male <br>
Civil Status: Single <br>
Address: Brgy. 6, Balingasag, Misamis Oriental <br>
Contact Number: 0927-338-2740 <br>
Email Address: jrcobispo@gmail.com <br>
</p>
<p>
<font face = "Arial" size = "4" color = "blue">
Profile Links </font> <br>
<a href="http://facebook.com/rangie88" target="_blank"> Facebook profile. </a> <br>
<a href="http://twitter.com/rangie88" target="_blank"> Twitter profile. </a> <br>
<a href="http://plurk.com/jrobispo88" target="_blank"> Plurk profile.</a> <br>
</p>
</div>
<div>
<p>
Objective: </font> <br>
Willing to work for a position where I can utilize my skills as a computer scientist.
</p>
<p>
Professional Strengths </font>
<ul class = "credentials">
<li> Can communicate well in English
<li> Can lead and manage a group well
<li> Can work in a team and under pressure
<li> Has good social skills
<li> Can work on multiple tasks
</ul>
</p>
<p>
Technical Proficiency </font>
<ul class = "credentials">
<li> Programming Languages: C, Java, Visual Basic .NET
<li> Databases: MySQL, MS SQL
<li> Microsoft Office
</ul>
</p>
<p>
Educational Background <br> </font>
<b>BS Computer Science </b> <br>
<i> Xavier University - Ateneo de Cagayan <br>
Coralles Ave., Cagayan de Oro City </i>
</p>
</div>
</body>
</html>
body {
background-color : #ADD8E6;
}
h1 {
font-style: bold;
color: #FFFFFF;
font-size: 50px;
background: #000080;
text-align: center;
}
p{
display: block;
font-size "4";
color: "black";
}
ul {
list-style-type : square;
font-size: "4";
color: "black";
}
div {
float: left;
width:420px;
padding:10px;
border:5px solid gray;
margin:2px;
}
a:link {
color:#0000FF; }
a:visited {
color:#FF0000; }
FORM VALIDATION 2
<script type="text/javascript">
function validate(){
var fname = document.myForm.fname.value;
var lname = document.myForm.lname.value;
var house = document.myForm.house.value;
var pcode = document.myForm.pcode.value;
var telno = document.myForm.telno.value;
var email = document.myForm.email.value;
var verEmail = document.myForm.verifyEmail.value;
var url = document.myForm.url.value;
var dob = document.myForm.dob.value;
var fnameRegxp = /^([a-zA-Z]+)$/;

var lnameRegxp = /^([a-zA-Z]+)$/;
var houseRegxp = /^([0-9A-Za-z]+)$/;
var pcodeRegxp = /^([A-Za-z]{1,2})([0-9]{2,3})([A-Za-z]{2})$/;
var telnoRegxp = /^([0-9]{11})$/;
var pcodeRegxp = /^([A-Za-z]{1,2})([0-9]{2,3})([A-Za-z]{2})$/;
var telnoRegxp = /^([0-9]{11})$/;
var dobRegxp = /^([0-9]){2}(\/|-){1}([0-9]){2}(\/|-)([0-9]){4}$/;
var emailRegxp = /^([\w]+)(.[\w]+)*@([\w]+)(.[\w]{2,3}){1,2}$/;
var urlRegxp = /^(http:\/\/www.|https:\/\/www.|ftp:\/\/www.|www.){1}([\w]+)(.[\w]+){1,2}$/;
if (fnameRegxp.test(fname) != true){
alert("First name appears to be incorrect");
}
if (lnameRegxp.test(lname) != true){
alert("Last name appears to be incorrect");
}
if (houseRegxp.test(house) != true){
alert("Address 1 appears to be incorrect");
}
if (pcodeRegxp.test(pcode) != true){
alert("Address 2 appears to be incorrect");
}
if (telnoRegxp.test(telno) != true){
alert("Telephone number appears to be incorrect");
}
if (emailRegxp.test(email) != true){
alert("Email address appears to be incorrect");
}
if (email != verEmail){
alert("Email appears to be incorrect");
}
if (urlRegxp.test(url) != true){
alert("URL appears to be incorrect");
}
if (dobRegxp.test(dob) != true){
alert("Date of Birth appears to be incorrect");
}
else {
alert("Data Correct");
//document.myForm.action.value = "process.cgi";
}
}
</script>

Form Validation

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Form Validation

Hochgeladen von

Copyright:

Verfügbare Formate

FORM VALIDATION (HTML)

function checkEntries (validation) {

<form name="validation" action="" method=post>

for (x=0; x<trips; x++){

var fnameRegxp = /^([a-zA-Z]+)$/;

Das könnte Ihnen auch gefallen