通用的JS表单验证
在做web开发时，免不了要对表单信息进行JS验证，如果每次开发都自己写一套验证程序，成本就太高了。一来现在做程序都讲究效率，如果你还在纠结于一个表单验证，那就太费时间了。所以这里有一份通知的表单验证，另附一份使用说明，这样大家在做项目时，就可以拿来就用了，不用再纠结于这个小问题了。
这份JS验证包括了对 空值、数字、汉字、最小长度、最大长度、手机、电话、传真、邮件、邮编、身份证号等验证。还包括一些对 全选按钮、时间格式、及开始-结束时间等验证等都包含进来了。
下面是使用说明样例：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<form name="fm" action="" method="post" onsubmit="return validateForm(this)">
<table width="100%" class="default">
<tr>
<td align="right"><b>传真<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入传真" size="30" faxValidatorInfo="请输入正确的传真">
</td>
</tr>
<tr>
<td align="right"><b>邮编<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入邮编" size="30" postValidatorInfo="请输入正确的邮编">
</td>
</tr>
<tr>
<td align="right"><b>电话<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入电话" size="30" telValidatorInfo="请输入正确的电话">
</td>
</tr>
<tr>
<td align="right"><b>手机<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入手机" size="30" mobileValidatorInfo="请输入正确的手机">
</td>
</tr>
<tr>
<td align="right"><b>邮箱<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入邮箱" size="30" emailValidatorInfo="请输入正确的邮箱">
</td>
</tr>
<tr>
<td align="right"><b>名称<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入名称" size="30" maxLen="5" lengthInfo="最多不超过5个字符">
</td>
</tr>
<tr>
<td align="right"><b>地址<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入地址" size="30" minLen="5" lengthMinInfo="最小不少于5个字符">
</td>
</tr>
<tr>
<td align="right"><b>人数<b></td>
<td>
<input type="textfield" name="examName" emptyInfo="请输入人数" numberInfo="必须为数字" size="30" maxLen="10" lengthInfo="最多不超过40个字符">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="sumbit" value="确定" class="btn" >
<input name="reset" type="reset" class="btn" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
下面这份是JS文件，common.js
//CheckBox全选
function selectAll(formName, cbName) {
var o = document.forms(formName).item(cbName);
if (o.length) {//判断是否只有一项
for (i=0; i<o.length; i++) {
document.forms(formName).item(cbName)[i].checked = true;
}
} else {
o.checked = true;
}
}
//CheckBox取消全选
function unSelectAll(formName, cbName) {
var o = document.forms(formName).item(cbName);
if (o.length) {//判断是否只有一项
for (i=0; i<o.length; i++) {
document.forms(formName).item(cbName)[i].checked = false;
}
} else {
o.checked = false;
}
}
/* 表单验证相关脚本 */
function getStringLength(str) {
var endvalue=0;
var sourcestr=new String(str);
var tempstr;
for (var strposition = 0; strposition < sourcestr.length; strposition ++) {
tempstr=sourcestr.charAt(strposition);
if (tempstr.charCodeAt(0)>255 || tempstr.charCodeAt(0)<0) {
endvalue=endvalue+2;
} else {
endvalue=endvalue+1;
}
}
return(endvalue);
}
function trim(str) {
if(str==null) return "";
if(str.length==0) return "";
var i=0,j=str.length-1,c;
for(;i<str.length;i++) {
c=str.charAt(i);
if(c!=' ') break;
}
for(;j>-1;j--) {
c=str.charAt(j);
if(c!=' ') break;
}
if(i>j) return "";
return str.substring(i,j+1);
}
function isNumber(input) {
var isNumber = /^[\d]+$/;
if(isNumber.test(input)){
return true;
}
return false;
}
// 匹配任何空白字符
function isNotChinese(input) {
var isNotChinese = /^[\sa-zA-Z\d]*$/;
if(isNotChinese.test(input)){
return true;
}
return false;
}
function isNullOrNumber(input) {
var isNumber = /^[\d]*$/;
if(isNumber.test(input)){
return true;
}
return false;
}
function validateDate(date,format,alt) {
var time=trim(date.value);
if(time=="") return;
var reg=format;
var reg=reg.replace(/yyyy/,"[0-9]{4}");
var reg=reg.replace(/yy/,"[0-9]{2}");
var reg=reg.replace(/MM/,"((0[1-9])|1[0-2])");
var reg=reg.replace(/M/,"(([1-9])|1[0-2])");
var reg=reg.replace(/dd/,"((0[1-9])|([1-2][0-9])|30|31)");
var reg=reg.replace(/d/,"([1-9]|[1-2][0-9]|30|31))");
var reg=reg.replace(/HH/,"(([0-1][0-9])|20|21|22|23)");
var reg=reg.replace(/H/,"([0-9]|1[0-9]|20|21|22|23)");
var reg=reg.replace(/mm/,"([0-5][0-9])");
var reg=reg.replace(/m/,"([0-9]|([1-5][0-9]))");
var reg=reg.replace(/ss/,"([0-5][0-9])");
var reg=reg.replace(/s/,"([0-9]|([1-5][0-9]))");
reg=new RegExp("^"+reg+"$");
if(reg.test(time)==false) {//验证格式是否合法
alert(alt);
date.focus();
return false;
}
return true;
}
function validateDateGroup(year,month,day,alt) {
var array=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var y=parseInt(year.value,10);
var m=parseInt(month.value,10);
var d=parseInt(day.value,10);
var maxday=array[m-1];
if(m==2) {
if((y%4==0&&y%100!=0)||y%400==0) {
maxday=29;
}
}
if(d>maxday) {
alert(alt);
return false;
}
return true;
}
function validateCheckbox(obj,alt) {
var rs=false;
if(obj!=null) {
if(obj.length==null) {
return obj.checked;
}
for(i=0;i<obj.length;i++) {
if(obj[i].checked==true) {
return true;
}
}
}
alert(alt);
return rs;
}
function validateRadio(obj,alt) {
var rs=false;
if(obj!=null) {
if(obj.length==null) {
return obj.checked;
}
for(i=0;i<obj.length;i++) {
if(obj[i].checked==true) {
return true;
}
}
}
alert(alt);
return rs;
}
function validateSelect(obj,alt) {
var rs=false;
if(obj!=null) {
for(i=0;i<obj.options.length;i++) {
if(obj.options[i].selected==true) {
return true;
}
}
}
alert(alt);
return rs;
}
function validateEmails(email,alt,separator) {
var mail=trim(email.value);
alert("mail");
alert(mail);
if(mail=="") return;
var em;
//var myReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;
var myReg =/^[a-zA-Z0-9_\-]{1,}@[a-zA-Z0-9_\-]{1,}\.[a-zA-Z0-9_\-.]{2,3}$/;
if(separator==null) {
if(myReg.test(email.value)==false) {
alert(alt);
email.focus();
return false;
}
} else {
em=email.value.split(separator);
for(i=0;i<em.length;i++) {
em[i]=em[i].trim();
if(em[i].length>0&&myReg.test(em[i])==false) {
alert(alt);
email.focus();
return false;
}
}
}
return true;
}
//验证Email
function validateEmail(input){
var myReg =/^[a-zA-Z0-9_\-]{1,}@[a-zA-Z0-9_\-]{1,}\.[a-zA-Z0-9_\-.]{2,3}$/;
if(myReg.test(input)){
return true;
}
return false;
}
//验证手机号码
function validateMobile(input){
var myReg = /^(?:13\d|15\d|18\d)-?\d{5}(\d{3}|\*{3})$/;
if(myReg.test(input)){
return true;
}
return false;
}
//验证传真号码
function validateFax(input){
var myReg = /^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;
if(myReg.test(input)){
return true;
}
return false;
}
//验证电话号码
function validateTel(input){
var myReg = /^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/;
if(myReg.test(input)){
return true;
}
return false;
}
//验证邮编
function validatePost(input){
var myReg =/^[0-9]{6}$/;
if(myReg.test(input)){
return true;
}
return false;
}
// 验证身份证号
function checkIDCard(str){
//身份证正则表达式(15位)
isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{2}[\0-9xX]{1}$/;
//身份证17位
isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}[0-9xX]{1}$/;
if((isIDCard1.test(str)||isIDCard2.test(str))){
return true;
}
return false;
}
/* 验证表单，若通过则返回true */
function validateForm(theForm) {
var disableList=new Array();
var field = theForm.elements;//将表单中的所有元素放入数组
for(var i = 0; i < field.length; i++) {
//先判断是否设定了不验证表单
var vali=theForm.validate;
if(vali!=null) {
if(vali.value=="0") {
var fun=vali.functionName;
if(fun!=null) {
return eval(fun+"()");
} else {
return true;
}
}
}
var empty=false;
var value=trim(field[i].value);
if(value.length==0) {//是否空值
empty=true;
}
var notFocus=field[i].notFocus;//不置焦点
if (notFocus!=null) {
notFocus = true;
}
var emptyInfo=field[i].emptyInfo;//空值验证
if(emptyInfo!=null&&empty==true) {
alert(emptyInfo);
if (!notFocus){
field[i].focus();
}
return false;
}
var nfEmptyInfo=field[i].emptyInfo;//不focus的空值验证
if(nfEmptyInfo!=null&&empty==true) {
alert(nfEmptyInfo);
return false;
}
var lengthInfo=field[i].lengthInfo;//最大长度验证
if(lengthInfo!=null&&getStringLength(value)>field[i].maxLen) {
alert(lengthInfo);
field[i].focus();
return false;
}
var lengthMinInfo=field[i].lengthMinInfo;//最小长度验证
if(lengthMinInfo!=null&&getStringLength(value)<field[i].minLen) {
alert(lengthMinInfo);
field[i].focus();
return false;
}
var numberInfo=field[i].numberInfo;//是否是正整数
if (numberInfo!=null) {
if (!isNumber(value)) {
alert(numberInfo);
field[i].select();
return false;
}
}
var notChineseInfo=field[i].notChineseInfo;//匹配包括下划线的任何单词字符
if (notChineseInfo!=null) {
if (!isNotChinese(value)) {
alert(notChineseInfo);
field[i].select();
return false;
}
}
var noChineseInfo=field[i].noChineseInfo;//是否为汉字
if (noChineseInfo!=null) {
if (!isNotChinese(value)) {
alert(noChineseInfo);
field[i].focus();
return false;
}
}
var numberOrNullInfo=field[i].numberOrNullInfo;//是否是空或者正整数
if (numberOrNullInfo!=null) {
if (!isNullOrNumber(value)) {
alert(numberOrNullInfo);
field[i].select();
return false;
}
}
var telValidatorInfo = field[i].telValidatorInfo; //验证普通电话号码
if(telValidatorInfo != null){
if(!validateTel(value)&&value.length!=0){
alert(telValidatorInfo);
field[i].focus();
return false;
}
}
var mobileValidatorInfo = field[i].mobileValidatorInfo; //验证手机号码
if(mobileValidatorInfo != null){
if(!validateMobile(value)&&value.length!=0){
alert(mobileValidatorInfo);
field[i].focus();
return false;
}
}
var faxValidatorInfo = field[i].faxValidatorInfo; //验证传真号码
if(faxValidatorInfo != null){
if(!validateFax(value)&&value.length!=0){
alert(faxValidatorInfo);
field[i].focus();
return false;
}
}
var emailValidatorInfo = field[i].emailValidatorInfo; //验证Email
if(emailValidatorInfo != null){
if(!validateEmail(value) && value.length != 0){
alert(emailValidatorInfo);
field[i].focus();
return false;
}
}
var postValidatorInfo = field[i].postValidatorInfo; //验证邮编
if(postValidatorInfo != null){
if(!validatePost(value) && value.length != 0){
alert(postValidatorInfo);
field[i].focus();
return false;
}
}
var IDCardtValidatorInfo = field[i].IDCardtValidatorInfo; //验证身份证号
if(IDCardtValidatorInfo != null){
if(!checkIDCard(value) && value.length != 0){
alert(IDCardtValidatorInfo);
field[i].focus();
return false;
}
}
var validatorType=field[i].validatorType;
if(validatorType!=null) {//其它javascript
var rs=true;
if(validatorType=="javascript") {
eval("rs="+field[i].functionName+"()");
if(rs==false) {
return false;
} else {
continue;
}
} else if (validatorType=="disable") {//提交表单前disable的按钮
disableList.length++;
disableList[disableList.length-1]=field[i];
continue;
} else if (validatorType=="date") {
rs=validateDate(theForm.elements(field[i].fieldName),field[i].format,field[i].errorInfo);
} else if (validatorType=="dateGroup") {
rs=validateDateGroup(theForm.elements(field[i].year),theForm.elements(field[i].month),theForm.elements(field[i].day),field[i].errorInfo);
} else if(validatorType=="timeCmp") {
rs=comparetime3(theForm.elements(field[i].startdate).value,theForm.elements(field[i].enddate).value,field[i].errorInfo);
} else if (validatorType=="checkbox") {
rs=validateCheckbox(theForm.elements(field[i].fieldName),field[i].errorInfo);
} else if (validatorType=="radio") {
rs=validateRadio(theForm.elements(field[i].fieldName),field[i].errorInfo);
} else if (validatorType=="select") {
rs=validateSelect(theForm.elements(field[i].fieldName),field[i].errorInfo);
} else if (validatorType=="email") {
rs=validateEmails(theForm.elements(field[i].fieldName),field[i].EmailErrorInfo);
}else {
alert("验证类型不被支持, fieldName: "+field[i].name);
return false;
}
if(rs==false) {
return false;
}
} else {//一般验证
if(empty==false) {
var v = field[i].validator; // 获取其validator属性
if(!v) continue; // 如果该属性不存在,忽略当前元素
var reg=new RegExp(v);
if(reg.test(field[i].value)==false) {
alert(field[i].errorInfo);
field[i].focus();
return false;
}
}
}
}
for(i=0;i<disableList.length;i++) {
disableList[i].disabled=true;
}
return true;
}
/* iframe 高度自适应 */
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=getFFVersion>=0.1? 16 : 0
function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
//CheckBox删除
function del(formname,cbname){
var a = document.getElementsByName(cbname);
var sum=0;
var c=false;
for(i=0;i< a.length; i++)
{
if(a[i].checked){
sum++;
}
}
if(sum>0)
{
c=window.confirm('确定删除？')
if(c)
{
document.forms(formname).submit();
}
}
else
{
alert('您还没有选择');
}
}
//CheckBox操作
function docheck(formname,cbname){
var a = document.getElementsByName(cbname);
var c=false;
for(i=0;i< a.length; i++)
{
if(a[i].checked){
sum++;
}
}
if(sum>0)
{
document.forms(formname).submit();
}
else
{
alert('您还没有选择');
}
}
//判断页面上输入的两个值是否相同,相同提示错误,不同执行操作
function unequal(formname,inputname0,inputname2)
{
var a = trim(inputname0.value);
var b = trim(inputname2.value);
if(a==b)
{
alert('不可以重复');
}
else
{
document.forms(formname).submit();
}
}
//判断时间先后顺序,a为前面的时间,b为后面的时间,错误则提示
function comparetime(a,b)
{
var time1 = a.substring(0,4).concat(a.substring(5,7)).concat(a.substring(8,10));
var time2 = b.substring(0,4).concat(b.substring(5,7)).concat(b.substring(8,10));
if((time1)>time2)
{
alert('时间顺序错误');
return false;
}
else
{
return true;
}
}
//,a,b,
function comparetime3(a,b,alt)
{
var time1 = a.substring(0,2).concat(a.substring(3,5)).concat(a.substring(6,10));
var time2 = b.substring(0,2).concat(b.substring(3,5)).concat(b.substring(6,10));
if(time2 == null || time2 == "")
{
return true;
}
else if((time1)>time2)
{
alert(alt);
return false;
}
else
{
return true;
}
}
//Cookie操作
function Setcookie (name, value) { //设置名称为name,值为value的Cookie
document.cookie = name + "=" + value + "";
}
function Deletecookie (name) { //删除名称为name的Cookie
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
function getCookieVal (offset) { //取得项名称为offset的cookie值
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) { //取得名称为name的cookie值
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function comparetime2(a,a2,a3,b,b2,b3){ // 比较时间顺序，精确到分钟
var time1 = a.substring(0,4).concat(a.substring(5,7)).concat(a.substring(8,10)).concat(a2).concat(a3);
var time2 = b.substring(0,4).concat(b.substring(5,7)).concat(b.substring(8,10)).concat(b2).concat(b3);
if((time1)>time2)
{
alert('时间顺序错误');
return false;
}
else
{
return true;
}
}
/* 判断选项中重复项 */
function checkOptionSame(formSrc, optNum, optPre) {
var z=0;
var a=new Array(optNum);
for (var i=0; i<optNum; i++) {
var index = i+1;
a[i] = formSrc[optPre + index].value;
if (a[i]=="") {
z = i;
break;
}
}
for(var i=0; i<z; i++) {
for (var j=i+1; j<=z; j++) {
if(a[i]==a[j]) {
alert("选项中有重复的内容！");
return false;
}
}
}
return true;
}
/* div 显示隐藏相关脚本 */
function changediv(divid) {
clearalldiv();
showdiv(divid);
}
function cleardiv(divid) {
document.getElementById(divid).style.display="none";
}
function showdiv(divid) {
document.getElementById(divid).style.display="";
}