如果需要从用户那里收集信息，就需要使用表单。
表单包含大多数常见的图形界面元素，例如文本框，单选按钮，复选框，下拉菜单等等。
填写完表单，点击Submit按钮将表单发送给web服务器，尽管可以通过服务器CGI程序完成验证，但在客户端用javascript验证要快得多，而且用户操作的效率也高。
这篇博客,主要是把我写的一个用于验证表单的可复用,可扩展的javascript脚本（版本1.0）分享给大家.
先来看看实现效果：
1、初始表单
2、提交，
如果Email为空,则：
3、如果Email不符合规范,则：
4、如果没有选择下拉框内容,则：
5、如果没有选择单选按钮中的一个,则：
6、根据已选字段,自动选择其他字段:选择NormalUser会自动选择2G
验证两个至少选一个:如果没有输入地址,也没有选择地址,则:
7、验证邮编：如果输入错误的邮编则：
8、验证文件：如果输入错误的Image格式,则：
javascript脚本（ValidForm1.js）：
// JavaScript Document
window.onload=initForms;
function initForms(){
for (var i=0;i<document.forms.length;i++){
//遍历所有表单，执行验证
document.forms[i].onsubmit=function(){return validForm();}
};
//为复选框NormalUser注册事件
document.getElementById("NormalUser").onclick=spaceSet;
};
function validForm(){
var allGood=true;
//获得所有标签
var allTags=document.getElementsByTagName("*");
for (var i=0;i<allTags.length;i++){
//检验所有标签
if(!validTag(allTags[i])){
allGood=false;
};
};
return allGood;
//检验标签是否有效
function validTag(thisTag){
var outClass="";
//获得该标签的class属性
var allClasses=thisTag.className.split(" ");
for (var j=0;j<allClasses.length;j++){
//验证该标签，通过改变class标识无效标签
outClass += validBasedOnClass(allClasses[j])+" ";
};
thisTag.className=outClass;
if(outClass.indexOf("invalid")>-1){
//标识出无效的输入值前的标签
invalidLabel(thisTag.parentNode);
//无效输入标签获得焦点
thisTag.focus();
//如果是输入标签，则选中其中的文本
if(thisTag.nodeName=="INPUT"){
thisTag.select();
};
return false;
};
return true;
//标识无效的字段，添加类名invalid
function validBasedOnClass(thisClass){
var classBack="";
//验证，在这里可以扩展验证
switch(thisClass){
case "":
case "invalid":
break;
case "reqd":
//判断空
if (allGood && thisTag.value=="")
//invalid后有空格
{classBack="invalid ";};
classBack += thisClass;
break;
case "radio":
//检查是否已选单选框
if(allGood && !radioPicked(thisTag.name)){classBack="invalid ";};
classBack += thisClass;
break;
case "isNum":
//检查是否是数字
if(allGood && !isNum(thisTag.value)){classBack="invalid ";};
classBack += thisClass;
break;
case "isEmail":
//检查是否是Email
if(allGood && !isEmail(thisTag.value)){classBack="invalid ";};
classBack += thisClass;
break;
case "isImage":
//检查是否是图片，可以演化为检查文件名
if(allGood && !isImg(thisTag.value)){classBack="invalid ";};
classBack += thisClass;
break;
case "isPostcode":
//检查邮政编码
if(allGood && !isPostcode(thisTag.value)){classBack="invalid ";};
classBack += thisClass;
break;
case "isAddress":
classBack += thisClass;
break;
default:
//invalid后有空格
//检查是否至少已经设置了两个字段之一
if(allGood && !crossCheck(thisTag,thisClass)){classBack="invalid ";};
classBack += thisClass;
};
return classBack;
};
//检查是否至少已经设置了两个字段之一
//这是为邮政编码字段和地址列表元素准备的
function crossCheck(inTag,otherFieldID){
if(!document.getElementById(otherFieldID)){return false;};
return (inTag.value!="" || document.getElementById(otherFieldID).value!="")
};
//标识出有问题的字段的标签
function invalidLabel(parentTag){
if(parentTag.nodeName=="LABEL"){
//invalid前有空格
parentTag.className += " invalid";
};
};
//确保用户选择了一个单选按钮
function radioPicked(radioName){
var radioSet="";
//循环遍历表单，如果找到要找单选按钮组，radio就会包含一个值
for (var k=0;k<document.forms.length;k++){
//将radioSet设置为正在查看的表单中单选按钮组的名称
if(!radioSet){
radioSet=document.forms[k][radioName];
};
};
//如果不能找到单选按钮组，则返回false，不能选择单选按钮
if(!radioSet){return false;}
//检查每个单选按钮，如果有一个被选中，则返回true
for(k=0;k<radioSet.length;k++){
if(radioSet[k].checked){
return true;
};
};
//没有发现被选中单选按钮，则返回false
return false;
};
//验证是否是数字
function isNum(passedVal){
//如果字段是空的，那么肯定不是数组，直接返回False就可以了
if (passedVal==""){return false;}
for(var k=0; k<passedVal.length;k++)
{
//charAt函数返回字段位置K上的字符，检查是否为数字
if(passedVal.charAt(k)<"0"){return false;}
if (passedVal.charAt(k)>"9"){return false;}
};
return true
};
//纯javascript检查邮箱（不使用正则表达式），只是检验输入的内容符合Email的正确形式，无法确认是否存在。
function validEmail(email){
//验证是否存在空格，斜杠，冒号，都好分号等无效字符
var invalidChars=" /:,;";
if (email==""){return false;};
for (var k=0;k<invalidChars.length;k++){
var badChar=invalidChars.charAt(k);
if(email.indexOf(badChar)>-1){return false;};
};
//验证是否存在@
var atPos=email.indexOf("@",1);
if(atPos==-1){return false;};
//验证@是否重复存在
if(email.indexOf("@",atPos+1)!=-1){return false;};
//验证是否存在点
var periodPos=email.indexOf(".",atPos);
if(periodPos==-1){return false;};
//验证点号后是否至少有两个字符
if(periodPos+3>email.length){return false;};
return true;
};
//用正则表达式检验电子邮件地址（推荐使用）
function isEmail(email){
var reEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
return reEmail.test(email);
};
//用正则表达式检验文件后缀是否为gif或jpg
function isImg(newURL){
var reImg=/^(file|http):\/\/\S+\/\S+\.(gif|jpg)$/i;
return reImg.test(newURL);
};
//验证邮政编码
function isPostcode(postcode){
var rePostcode=/^[0-9]{6}$/;
return rePostcode.test(postcode);
}
//可以在这里继续扩展验证内容，例如
//验证座机号码
//验证手机
};
};
//根据用户做出的选择自动设置字段输入
function spaceSet(){
if(this.checked){
document.getElementById("Space2").checked=true;
}else
{
document.getElementById("Space2").checked=false;
};
};
注释，我尽量写得详细些，大家应该能看明白。
可复用:
基本上囊括了表单上最常用的几个控件的验证方法.
可扩展,方法:
只要在这个位置
加入你需要验证的标签的class属性,
然后在这里,
添加你的验证方法即可.
Html文档：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="ValidForm1.js"></script>
<link rel="stylesheet" type="text/css" href="ValidForm.css">
</head>
<body>
<h2 >Valid Form</h2>
<form action="#">
<p><label for="emailAddr">Email Address:
<input id="emailAddr" type="text" size="30" class="reqd isEmail" />
</label></p>
<p><label for="color">Colors:
<select id="color" class="reqd">
<option value="" selected="selected">Choose a color</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
</label></p>
<p>Options:
<label for="NormalUser"><input type="checkbox" id="NormalUser" value="Yes" />NormalUser(2G only)</label>
<label for="AdvancedUser"><input type="checkbox" id="AdvancedUser" value="Yes" />AdvancedUser</label></p>
<p><label for="Space">Space:
<input type="radio" id="Space2" name="Space" value="2G" class="radio" />2G
<input type="radio" id="Space4" name="Space" value="4G" class="radio" />4G
</label></p>
<p><label for="address">Enter your Address or pick the Address<br />Address:<input type="text" id="address" size="30" maxlength="30" class="isAddress addressList"/>
<select id="addressList" size="4" class="address">
<option value="cangzhou">Cangzhou</option>
<option value="langfang">Langfang</option>
<option value="handan">Handan</option>
<option value="baoding">Baoding</option>
<option value="zhangjiakou">Zhangjiakou</option>
</select>
</label></p>
<p><label for="postcode">Postcode:<input id="postcode" type="text" size="6" maxlength="6" class="isPostcode" /></label></p>
<p><label for="image">Image URL:<input id="image" type="text" size="30" maxlength="30" class="isImage" /></label></p>
<p><input type="submit" value="Submit" /><input type="reset" value="Reset" /></p>
</form>
</body>
</html>
CSS样式表（ValidForm.css）：
@charset "utf-8";
/* CSS Document */
body{
color:#000;
background-color:#FFF;
}
input.invalid{
/*当输入无效时，使用该样式*/
background-color:#FF9;
border:2px red inset;
}
label.invalid{
/*当输入无效时，使用该样式*/
color:#F00;
}
欢迎拍砖！
会把改进放到版本2.0里！
分享到：
相关推荐
设计模式。。。。设计模式在编程用能够比较好的解决软件的可扩展，可复用问题。。。
billboard.js 一个基于D3 v4 可复用简洁界面的JavaScript图表库
一套组件化、可复用、易扩展的微信小程序 UI 组件库.zip
可复用的HTML反馈表单
本书结合设计实例从面向对象的设计中精选23个设计模式，总结了面向对象设计中最有价值的经验，并且用简洁可复用的形式表达出来。
设计模式可复用面向对象软件的基础 源代码 设计模式可复用面向对象软件的基础 源代码 gof
研究了自动化测试脚本及基于构件的软件复用技术，提出一个测试脚本构件模型TSCM。该模型结合测试脚本特性，在借鉴现行软件构件模型基础上加入构件连接子增强测试脚本构件的独立性和可复用性。设计了TSCM模型的XML...
设计模式可复用面向对象软件的基础 23中设计模式 源码实现
设计模式 - 可复用面向对象软件的基础（高清版PDF）设计模式可复用面向对象软件的基础高清版
软件工程之 设计模式 教程：可复用面向对象软件的基础
设计模式_可复用面向对象软件的基础，经典之作，入门必看
电信设备-扩展坞可复用的移动终端及其扩展坞复用的方法.zip
《设计模式:可复用面向对象软件的基础》是引导读者走出软件设计迷宫的指路明灯，凝聚了软件开发界几十年设计经验的结晶。四位顶尖的面向对象领域专家精心 选取了最具价值的设计实践，加以分类整理和命名，并用简洁而...
设计模式-可复用面向对象软件的基础 同事推荐的，网上找了好久，高清PDF版，可打印，可随时翻阅
设计模式-可复用面向对象软件的基础 中文版 设计模式-可复用面向对象软件的基础 英文版 设计模式-可复用面向对象软件的基础 source code 设计模式(C++)源代码 一雨田
设计模式 - 可复用面向对象软件的基础 04
本书设计实例从面向对象的设计中精选出23个设计模式，总结了面向对象设计中最有价值的经验，并且用简洁可复用的形式表达出来。本书分类描述了一组设计良好，表达清楚的软件设计模式，这些模式在实用环境下有特别有用...
设计模式——可复用的OO软件
设计模式可复用面向对象软件的基础（上）.