JavaScript通用表单验证函数

简介:

表单定义:
< form name = " form1 "  action = ""  style = " behavior:url('form.htc') " ></ form >
客户端表单验证是由表单的onSubmit事件触发,由于表单的onSubmit事件只能由提交按钮触发,
所以如果要用函数提交表单form1.submit(),则必须同时执行form1.onSubmit()。

类型定义:

一、整型(
int )
定义:
valueType
= " int "
属性:
objName 对象名称(字符串)
mustInput 必输项(
true / false )
minInput 最小值(数字)
maxInput 最大值(数字)
举例:
< input type = " text "  name = " test "  valueType = " int "  objName = " 总载重吨 "  mustInput = " true "  maxInput = " 10000 " >

二、浮点型(
float )
定义:
valueType
= " float "
属性:
objName 对象名称(字符串)
mustInput 必输项(
true / false )
minInput 最小值(数字)
maxInput 最大值(数字)
decimalLen小数位数(数字)
举例:
< input type = " text "  name = " test "  valueType = " float "  objName = " 运价 "  mustInput = " true "  maxInput = " 10000.50 "  decimalLen = " 2 " >

三、字符串(string)
定义:
valueType
= " string "
属性:
objName 对象名称(字符串)
mustInput 必输项(
true / false )
stringLen 字符串长度(数字)
举例:
< input type = " text "  name = " test "  valueType = " string "  objName = " 英文船名 "  mustInput = " true "  stringLen = " 100 " >

四、日期(date)
定义:
valueType
= " date "
属性:
objName 对象名称(字符串)
mustInput 必输项(
true / false )
举例:
< input type = " text "  name = " test "  valueType = " date "  objName = " 开始日期 "  mustInput = " true " >
备注:
日期现在只能校验的格式为(yyyy
- mm - dd)

五、邮箱(email)
定义:
valueType
= " email "
属性:
objName 对象名称(字符串)
mustInput 必输项(
true / false )
举例:
< input type = " text "  name = " test "  valueType = " email "  objName = " 邮箱 "  mustInput = " true " >

六、单选(radio)
定义:
valueType
= " radio "
属性:
objName 对象名称(字符串)
mustSelect 必输项(
true / false )
举例:
< input type = " radio "  name = " test "  valueType = " radio "  objName = " 租船方式 "  mustSelect = " true " >
备注:
对于同一组单选按钮,只需要定义第一个即可。

七、复选(checkbox)
定义:
valueType
= " checkbox "
属性:
objName 对象名称(字符串)
minSelect 最小选择数(数字)
maxSelect 最大选择数(数字)
举例:
< input type = " checkbox "  name = " test "  valueType = " checkbox "  objName = " 爱好 "  minSelect = " 2 "  maxSelect = " 5 " >
备注:
对于同一组复选按钮,只需要定义第一个即可。

八、下拉列表框(select)
定义:
valueType
= " select "
属性:
objName 对象名称(字符串)
mustSelect 必输项(
true / false )
举例:
< select name = " test "  valueType = " select "  objName = " 租船方式 "  mustSelect = " true " >

九、列表框(list)
定义:
valueType
= " list "
属性:
objName 对象名称(字符串)
minSelect 最小选择数(数字)
maxSelect 最大选择数(数字)
举例:
< select name = " test "  valueType = " list "  objName = " 爱好 "  minSelect = " 2 "  maxSelect = " 5 " >


// ///////////////////////////////////////////////////////////////////////////////////////////////////////

<!--   ---------------------------------------------------------------------
//
//
 File: form.htc
//
 version: 1.0
//
 Description:客户端表单验证.
//
 author: 伍子
//
//
-------------------------------------------------------------------- -->
< PUBLIC:COMPONENT id = " formCheck "  urn = " wwb:formCheck " >  
< PUBLIC:ATTACH EVENT = " onsubmit "  ONEVENT = " checkForm() " />
< script language = " JavaScript " >
function  checkForm()
{
var oForm=event.srcElement;
var eles = oForm.elements;
//遍历所有表元素
for(var i=0;i<eles.length;i++)
{
//是否需要验证
var sType=eles[i].valueType;
if(sType)
{
if(eles[i].mustInput!=null && eles[i].mustInput)
{
if(trim(eles[i].value)=="")
{
if(eles[i].objName!=null)
{
alert(eles[i].objName
+"不可以为空");
}

else
{
alert(
"该文本框为必输字段");
}

eles[i].focus(); 
event.returnValue
=false
return false
}

}
 
switch(sType)
{
//整数
case "int":
if(!checkInt(eles[i]))
{
event.returnValue
=false;
return false;
}

break;
//小数
case "float":
if(!checkFloat(eles[i]))

event.returnValue
=false;
return false;
}

break;
//字符串
case "string":
if(!checkString(eles[i]))
{
event.returnValue
=false;
return false;
}

break;
//日期
case "date":
if(!checkDate(eles[i]))
{
event.returnValue
=false;
return false;
}

break;
//邮件
case "email":
if(!checkEmail(eles[i]))
{
event.returnValue
=false;
return false;
}

break;
//单选按钮
case "radio":
if(!checkRadio(eles[i]))
{
event.returnValue
=false;
return false;
}

break;
//复选按钮
case "checkbox":
if(!checkBox(eles[i]))
{
event.returnValue
=false;
return false;
}

break;
//下拉列表框
case "select":
if(!checkSelect(eles[i]))
{
event.returnValue
=false;
return false;
}

break;
//列表框
case "list":
if(!checkList(eles[i]))
{
event.returnValue
=false;
return false;
}

break;
}

}

}

event.returnValue
=true;
return true;
}


/***检查是否为整数***/
function  checkInt(ele)
{
if(!isInt(ele.value))
{
alert(
"请输入有效整数");
ele.focus();
return false;
}

else
{
if(ele.maxInput!=null && !isNaN(ele.maxInput))
if(parseInt(ele.maxInput)<parseInt(ele.value))
{
alert(
"您输入的"+ convertNullToSpace(ele.objName)+"值应该小于"+ele.maxInput); 
ele.focus();
return false;
}
 
if(ele.minInput!=null && !isNaN(ele.minInput))
if(parseInt(ele.minInput)>parseInt(ele.value))
{
alert(
"您输入的"+ convertNullToSpace(ele.objName)+"值应该大于"+ele.minInput);
ele.focus();
return false;
}
 
}

return true;
}


/***检查是否为小数***/
function  checkFloat(ele)
{
if(isNaN(ele.value))
{
alert(
"请输入有效数字");
ele.focus();
return false;
}

else
{
if(ele.decimalLen!=null && !checkDecimal(ele.value,ele.decimalLen))
{
alert(
"您输入的"+convertNullToSpace(ele.objName)+"值小数位最多为"+ele.decimalLen);
ele.focus(); 
return false;
}
 
if(ele.maxInput!=null && !isNaN(ele.maxInput))
if(parseInt(ele.maxInput)<parseInt(ele.value))
{
alert(
"您输入的"+ convertNullToSpace(ele.objName)+"值应该小于"+ele.maxInput); 
ele.focus();
return false;
}
 
if(ele.minInput!=null && !isNaN(ele.minInput))
if(parseInt(ele.minInput)>parseInt(ele.value))
{
alert(
"您输入的"+ convertNullToSpace(ele.objName)+"值应该大于"+ele.minInput);
ele.focus();
return false;
}
 
}

return true;
}


/***检查是否为字符串***/
function  checkString(ele)
{
if(ele.stringLen!=null && !isNaN(ele.stringLen))
{
var value=new String(ele.value);
if(value.length>parseInt(ele.stringLen))
{
alert(
"您输入的"+convertNullToSpace(ele.objName)+"最大长度为"+ele.stringLen);
ele.focus(); 
return false;
}

}

return true;
}

/***检查是否为日期格式***/
function  checkDate(ele)
{
if(!isDate(ele.value))
{
alert(
"请输入有效日期(yyyy-mm-dd)");
ele.focus();
return false;
}

return true;
}


/***检查是否为电子邮箱***/
function  checkEmail(ele)
{
if(!isEmail(ele.value))
{
alert(
"请输入有效邮箱");
ele.focus();
return false;
}

return true;
}

/***检查单选按钮是否需要选择***/
function  checkRadio(ele)
{
//var rads = document.getElementsByName(ele.name);
eval("var rads="+name+"."+ele.name);
var selectCount=0;
for(var i=0;i<rads.length;i++)
{
if(rads[i].checked)
{
selectCount
++;
}

}


if(ele.mustSelect!=null && ele.mustSelect)
{
if(selectCount==0)
{
alert(
"请选择"+convertNullToSpace(ele.objName));
ele.focus(); 
return false;
}

}

return true;
}

/***检查复选按钮是否需要选择***/
function  checkBox(ele)
{
//var rads = document.getElementsByName(ele.name);
eval("var chks="+name+"."+ele.name);
var selectCount=0;
for(var i=0;i<chks.length;i++)
{
if(chks[i].checked)
{
selectCount
++;
}

}

if(ele.minSelect!=null && !isNaN(ele.minSelect))
{
if(selectCount<parseInt(ele.minSelect))
{
alert(convertNullToSpace(ele.objName)
+"至少选择"+ele.minSelect+"");
ele.focus(); 
return false;
}

}

if(ele.maxSelect!=null && !isNaN(ele.maxSelect))
{
if(selectCount>parseInt(ele.maxSelect))
{
alert(convertNullToSpace(ele.objName)
+"至多选择"+ele.maxSelect+"");
ele.focus(); 
return false;
}

}

return true;
}

/***检查下拉列表框是否需要选择***/
function  checkSelect(ele)
{
//var rads = document.getElementsByName(ele.name);
if(ele.mustSelect!=null && ele.mustSelect)
{
if(ele.selectedIndex==0)
{
alert(
"请选择"+convertNullToSpace(ele.objName));
ele.focus(); 
return false;
}

}

return true;
}

/***检查列表框的选择项数***/
function  checkList(ele)
{
//var rads = document.getElementsByName(ele.name);
var selectCount=0;
for(var i=0;i<ele.options.length;i++)
{
if(ele.options[i].selected)
{
selectCount
++;
}

}

alert(selectCount);
if(ele.minSelect!=null && !isNaN(ele.minSelect))
{
if(selectCount<parseInt(ele.minSelect))
{
alert(convertNullToSpace(ele.objName)
+"至少选择"+ele.minSelect+"");
ele.focus(); 
return false;
}

}

if(ele.maxSelect!=null && !isNaN(ele.maxSelect))
{
if(selectCount>parseInt(ele.maxSelect))
{
alert(convertNullToSpace(ele.objName)
+"至多选择"+ele.maxSelect+"");
ele.focus(); 
return false;
}

}

return true;
}

/***判断是否为整数***/
function  isInt(s)
{
var patrn=/^[-,+]{0,1}[0-9]{0,}$/;
if (!patrn.exec(s))
return false;
return true;
}

/***判断是否为数字***/
function  isNumber(s)
{
var patrn=/^[-,+]{0,1}[0-9]{0,}[.]{0,1}[0-9]{0,}$/;
if (!patrn.exec(s))
return false;
return true;
}

/***判断是否为日期***/
function  isDate(str)
{
var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); 
if(r==null)
{
return false;
}
 
var d= new Date(r[1], r[3]-1, r[4]); 
if(!(d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]))

return false;
}

return true;
}

/***判断是否为邮箱***/
function  isEmail(str)
{
if(str.match(/[\w-]+@{1}[\w-]+\.{1}\w{2,4}(\.{0,1}\w{2}){0,1}/ig)!=str)
return false;
else
return true;
}

/***将NULL转化为空格,用于显示对象名称***/
function  convertNullToSpace(paramValue)
{
if(paramValue==null)
return "";
else 
return paramValue;
}

/***检查小数位数***/
function  checkDecimal(num,decimalLen)
{
var len = decimalLen*1+1;
if(num.indexOf('.')>0)
{
num
=num.substr(num.indexOf('.')+1,num.length-1); 
if ((num.length)<len)
{
return true;
}

else
{
return false;
}

}

return true;
}

/***去除空格***/
function  trim(str)
{
if (str.length > 0
{
while ((str.substring(0,1== " "&& (str.length > 0)) 
{
str 
= str.substring(1,str.length);
}

while (str.substring(str.length-1,str.length) == " "
{
str 
= str.substring(0,str.length-1);
}

}

return str;
}

</ script >
</ PUBLIC:COMPONENT >  



本文转自高海东博客园博客,原文链接:http://www.cnblogs.com/ghd258/archive/2005/11/07/270754.html,如需转载请自行联系原作者
相关文章
|
1月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
42 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
27天前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
24 1
|
1月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
46 3
|
1月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
2月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
2月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
53 4
|
2月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
42 4
|
2月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
21 2
|
2月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
28 5