zoukankan
html css js c++ java
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
>
查看全文
相关阅读:
emacs写cnblog博客
emacs写cnblog博客
linux安装jdk
linux远程服务器启动mysql时显示:/tmp/mysql.sock 不存在的解决方法
最新Linux系统下安装MySql 5.7.17全过程及注意事项
Xshell实现Windows上传文件到Linux主机
4种java定时器
微信的redirect_uri参数错误解决办法
要善于借势破局——宁向东的清华管理学课第4课
Java内存区域
原文地址:https://www.cnblogs.com/ghd258/p/270754.html
最新文章
【echart】showLoading hideLoading 无数据时显示正在加载
【echarts】echarts图形聚在一起,样式错乱解决办法
【js】把当前毫秒时间转换为时间戳
【vue】在vue项目中 如何定义全局变量 全局函数
kwicks插件学习
动感缩放图标菜单
【新手练习】类似Path的按钮,
堆和栈
存储过程调用存储过程
抽象类和抽象函数
热门文章
函数成员
sql with as 用法
键盘布局
键盘布局
debian软raid
cyg-apt update 升级报错
cyg-apt update 升级报错
cyg-apt update 升级报错
cygwin的使用
cygwin的使用
Copyright © 2011-2022 走看看