表单定义:
<
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
>





































































































































































































































































































































































































































































































































