经典表单验证

　　我的网易博客: http://blog.163.com/lthvhuan 本人博客内所有内容均作个人备忘所用,仅供大家参考. 如有非法转载之处,敬请原著作者通知我,本人将会第一时间删除. 当然,若大家需转载此博文章,也请您尊重他人的成果,标出原始出处. 学习交流,在于心胸广阔,希望大家交流愉快!
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　验证功能如下:
　　1. 当表单输入元素在获得焦点时出现信息提示
　　2. 当表单输入元素在失去焦点时进行验证
　　3. 表单提交时进行整个表单的验证.
　　HTML代码: 表单验证实例 body { text-align:center; font-size:14px;} table {border:1px solid #CCCCCC;width:80%; text-align:left;} input { line-height:20px; border:1px solid #000000;} td { height:20px; padding:4px;} .right{ text-align:right;} .title{ font-size:14px; background-color:#CCCCCC; font-weight:bold; height:20px;} 表单验证示例 用户名 必填 电子邮件 必填,格式验证 备用邮件 非必填,若填写则格式验证 邮编 非必填,若填写则格式验证 电话 非必填,若填写则格式验证 JavaScript代码: /* 验证要求：在表单的失去焦点事件和表单提交时进行验证 表单说明：在表单的旁边应有一个元素存储提示信息，命名为表单元素名+info,同时为验证表单元素指定ID 函数说明：接收表单的元素名称及表单状态(0为获得焦点,1为失去焦点进行验证),将验证的结果插入到表单旁边的ID中 验证过程: 1.接收传表单元素的ID和表单状态,并获取值; 2.拟定正则表达式 3.验证处理 4.反馈处理结果到指定表单旁的区域中.*/ //验证是否为空 /** * _obj 要验证的控件的id * flag 控件当前状态提示(0表示直接焦点提示,1表示验证后提示(即失去焦点时使用)) */ function isEmpty(_obj,flag){ var obj = document.getElementById(_obj.id); var info = document.getElementById(_obj.id+"Info"); if(flag==1){/*flag=1*/ if(obj.value.length == 0){ showInfo(info,"此必填项您尚未填写","red") return false;} else{ showInfo(info,"√","green") return true;} } else{ showInfo(info,"请按正式的格式输入","blue") return false; } } //验证电子邮件 /* * _obj 要验证的Email控件的id * isEmpty 是否为必填(0为非必填,1为必填) * flag 控件当前状态提示(0表示直接焦点提示,1表示验证后提示(即失去焦点时使用)) */ function isEmail(_obj,isEmpty,flag){ var obj = document.getElementById(_obj.id); var info = document.getElementById(_obj.id+"Info"); var reg =/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; if (flag==1){ if(isEmpty==1){/*必填时验证*/ if(obj.value == ""){ showInfo(info,"电子邮件不能为空","red") return false; } if (reg.test(obj.value)==false){ showInfo(info,"电子邮件格式不正确","red") return false;} else{ showInfo(info,"√","green") return true;} } else{/*非必填时验证*/ if (obj.value.length>0){ if (reg.test(obj.value)==false){ showInfo(info,"电子邮件格式不正确","red") return false;} else{ showInfo(info,"√","green") return true; } } else{ showInfo(info,"备选邮箱为可选填的内容","black") return true; } } } else{ showInfo(info,"填写电子邮件可以取回密码","blue") } } //验证邮编,内容非必填字段,如果填写则进行验证 function isPostCode(_obj,flag){ var obj = document.getElementById(_obj.id); var info = document.getElementById(_obj.id+"Info"); var reg = /^\d{6}$/; if(flag){ if(obj.value.length>0){ if(reg.test(obj.value)==false){ showInfo(info,"邮政编码格式不正确","red") return false;} else{ showInfo(info,"√","green") return true;} } else{ showInfo(info,"邮编为可选填的内容","black") return true;} } else{ showInfo(info,"邮编的格式为6位数字","blue") } } //电话验证:非必填内容 function isPhone(_obj,flag){ var obj=document.getElementById(_obj.id); var info=document.getElementById(_obj.id+"Info"); var reg=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\ ([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/; if(flag){ if(obj.value.length>0){ if(reg.test(obj.value)==false){ showInfo(info,"电话格式不正确","red") return false; } else{ showInfo(info,"√","green") return true; } } else{ showInfo(info,"电话号码为可选填的内容","black") return true; } } else{ showInfo(info,"电话号码为11位有效的数字格式","blue") } } //显示信息 function showInfo(_info,msg,color){ var info=_info; info.innerHTML = msg; info.style.color=color; //如果指定样式的话,使用info.className = "样式名"; }