js表单验证代码

验证表单域和格式提交。如果不正确或没有输入数据，有关的字段将被突出，而其他保留的价值。

<script type="text/javascript" language="javascript">
<!--

function validate() {

 if(!document.getElementById) return;

// get form variables
var title = document.getElementById("title").value;
var initials = document.getElementById("initials").value;
var surname = document.getElementById("surname").value;
var street = document.getElementById("street").value;
var town = document.getElementById("town").value;
var city = document.getElementById("city").value;
var county = document.getElementById("county").value;
var postcode = document.getElementById("postcode").value;
var phone = document.getElementById("phone").value;
var fax = document.getElementById("fax").value;

var incorrect = new Array();
var no = 0;
var regExp = /[A-Za-z]{2,6}/;
if(regExp.test(title)) {
 title = title.charAt(0).toUpperCase() + title.substring(1,title.length).toLowerCase();
}
else {
 incorrect[no] = "1";
 no++;
 title = "";
 }
regExp = /[A-Za-z]{1,}/;
if(regExp.test(initials)) {
 initials = initials.toUpperCase();
}
else {
 incorrect[no] = "2";
 no++;
 initials = "";
}
regExp = /[A-Za-z]{3,}-?[A-Za-z]?/;
if(regExp.test(surname)) {
 surname = surname.charAt(0).toUpperCase() + surname.substring(1,surname.length).toLowerCase();
}
else {
 incorrect[no] = "3";
 no++;
 surname = "";
}
if(street.length < 5) {
 incorrect[no] = "4";
 no++;
 street = "";
}
if(town.length < 3) {
 incorrect[no] = "5";
 no++;
 town = "";
}
if(city.length < 3) {
 incorrect[no] = "6";
 no++;
 city = "";
}
if(county.length < 5) {
 incorrect[no] = "7";
 no++;
 county = "";
}
postcode = postcode.toUpperCase();
regExp = /[A-Z]{2}d{1}d?s?d{1}[A-Z]{2}/;
if(regExp.test(postcode)) {
 if(postcode.indexOf(" ") < 0) {
  postcode = postcode.substring(0,postcode.length-3) + " " + postcode.substring(postcode.length-3,postcode.length);
 }
}
else {
incorrect[no] = "8";
no++;
postcode = "";
 
}  

regExp = /(?d{5})?s?d{6}/;
if(regExp.test(phone)) {
 if(phone.indexOf("(") < 0) {
  phone = "(" + phone.substring(0,5) + ") " + phone.substring(phone.length-6,phone.length);
 } 
 else if(phone.indexOf(" ") < 0) {
  phone = phone.substring(0,7) + " " + phone.substring(phone.length-6,phone.length);
 }
}
else {
incorrect[no] = "9";
no++;
phone = "";
}
if(regExp.test(fax)) {
 if(fax.indexOf("(") < 0) {
  fax = "(" + fax.substring(0,5) + ") " + fax.substring(fax.length-6,fax.length);
 } 
 else if(fax.indexOf(" ") < 0) {
  fax = fax.substring(0,7) + " " + fax.substring(fax.length-6,fax.length);
 }
}
else {
incorrect[no] = "10";
no++;
fax = "";
}
 
 for(i=1;i<11;i++) {
  document.getElementById(i).style.color="#000000";
 }
  
 for(j=0;j<no;j++) {
  document.getElementById(incorrect[j]).style.color="#FF0000";
 }
 if(no > 0) {
 document.getElementById("errors").innerHTML = "<span class="error">There was an error with your form submission. Please fill in the neccessary fields.</span><br />";
 }

 document.getElementById("title").value = title;
 document.getElementById("initials").value = initials;
 document.getElementById("surname").value = surname;
 document.getElementById("street").value = street;
 document.getElementById("town").value = town;
 document.getElementById("city").value = city;
 document.getElementById("county").value = county;
 document.getElementById("postcode").value = postcode;
 document.getElementById("phone").value = phone;
 document.getElementById("fax").value = fax;
}

// -->
</script>
html代码

<style type="text/css">
.error { 
 color:#FF0000;
}
span {
 font-weight:bold;
}
</style>
<div id="details" align="center">
<div id="errors"></div>
<form method="post">
<table border="0" cellpadding="4" cellspacing="0"><tr>
<td align="right"><span id="1">Title:</span></td><td><input name="id" id="title" type="text" size="25" maxlength="6" /></td></tr>
<tr><td align="right"><span id="2">Initials:</span></td><td><input name="initials" id="initials" type="text" size="25" maxlength="4" /></td></tr>
<tr><td align="right"><span id="3">Surname:</span></td><td><input name="surname" id="surname" type="text" size="25" /></td></tr>
<tr><td align="right"><span id="4">Street:</span></td><td><input name="street" id="street" type="text" size="25" /></td></tr>
<tr><td align="right"><span id="5">Town:</span></td><td><input name="town" id="town" type="text" size="25" /></td></tr>
<tr><td align="right"><span id="6">City:</span></td><td><input name="city" id="city" type="text" size="25" /></td></tr>
<tr><td align="right"><span id="7">County:</span></td><td><input name="county" id="county" type="text" size="25" /></td></tr>
<tr><td align="right"><span id="8">Postcode:</span></td><td><input name="postcode" id="postcode" type="text" size="25" maxlength="8" /></td></tr>
<tr><td align="right"><span id="9">Phone number:</span></td><td><input name="phone" id="phone" type="text" size="25" maxlength="14" /></td></tr>
<tr><td align="right"><span id="10">Fax number:</span></td><td><input name="fax" id="fax" type="text" size="25" maxlength="14" /></td></tr>
</table>
<input type="button" value="Submit" onClick="validate()" />
</form>
</div>