以前每有单验证,都会写很多javascript,而且是重复的,现在找到一种很简单的方法,分享给大家,也忘记是哪个网友贴 的,反正谢谢了。
这里主要是给input标签自定义两个validChar
, isRequired
attribute,然后在javascript里遍历form element,不废话了,code 贴来看看就知道了
---------------------------------------------------------------------------------------------------------------------------------------------------
LZValidator.html
---------------------------------------------------------------------------------------------------------------------------------------------------

<%
...
@ page contentType
=
"
text/html; charset=UTF-8
"
%>

<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
<
html
>
<
head
>
<
title
>
JavaScript验证表单字段
</
title
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=UTF-8"
>
</
head
>

<
script
type
="text/javascript"
>
...

/**/
/*
*
* 提交前检查
*/

function
check(vform)
...
{
//
遍历表单中每个表单域

for
(
var
i
=
0
;i
<
vform.elements.length;i
++
)
...
{ 
if
(vform.elements[i].type
==
"
text
"
)
...
{
//
如果表单域是文本框的话,进行定义好的验证
//
取得验证结果
var
checkResult
=
checkTextBox(vform.elements[i]);
//
alert(checkResult);
//
取得文本框名
var
name
=
vform.elements[i].getAttribute(
"
name
"
);

if
(checkResult)
...
{
//
验证通过
document.getElementById(name
+
"
Msg
"
).className
=
"
feedbackHide
"
;
}

else
...
{
//
验证不通过,显示提示文字并置焦点
document.getElementById(name
+
"
Msg
"
).className
=
"
feedbackShow
"
;
var
mesg
=
document.getElementById(name
+
"
Msg
"
).innerHTML;
alert(mesg);
vform.elements[i].focus();
return
false
;
}
}
}
return
true
;
}


/**/
/*
*
* 检查文本框
*/

function
checkTextBox(vTextBox)
...
{
//
取得文本框中允许输入的合法文字正则表达式
var
validChar
=
vTextBox.getAttribute(
"
validChar
"
);
//
取得文本框中是否必须检查的标志
var
isRequired
=
vTextBox.getAttribute(
"
isRequired
"
);
//
取得文本框的输入
var
inputValue
=
vTextBox.value;

if
(isRequired
!=
"
true
"
&&
inputValue.length
<
1
)
...
{
//
如果是非必填字段且没有输入则返回真
return
true
;
}

else
...
{
//
否则进行正则表达式验证
//
alert("表达式为"+validChar);
//
alert("验证的字符串为"+inputValue);
var
regexStr
=
"
^
"
+
validChar
+
"
$
"
;
var
regex
=
new
RegExp(regexStr);
return
regex.test(inputValue);
}
}
</
script
>


<
style
type
="text/css"
>
...
<!--
.feedbackShow
{...}
{
visibility
:
visible
;
}


.feedbackHide
{...}
{
visibility
:
hidden
;
}
-->
</
style
>


<
body
>
<
div
id
="bodyDiv"
>
<
div
id
="header"
>
<
jsp:include
page
="/web/page/branch/header.jsp"
/>
</
div
>
<
div
id
="sidebar"
>
<
jsp:include
page
="/web/page/branch/sidebar.jsp"
/>
</
div
>
<
div
id
="content"
>
<!--
外层表格,比内表格宽,以在左右留出一定空当
-->
<
table
cellspacing
="0"
cellpadding
="0"
width
="630"
align
="center"
border
="0"
>
<
tr
bgcolor
="#eaecf5"
height
="25"
>
<
td
colspan
=3
>
<
font
face
=webdings
color
=#ff8c00
>
8
</
font
><
b
>
请填入个人信息 </ b >< /td >
</
tr
>
<
tr
bgcolor
=#236d78
height
=1
><
td
></
td
></
tr
>
<
tr
bgcolor
=#eaecf5
>
<
td
bgcolor
=#ffffff
>
<!--
内置表格,居中,比外表格窄,
-->
<
form
action
="#"
onsubmit
="return check(this);"
>
<
table
width
=560
align
=center
border
=0
>
<
tbody
>
<
tr
>
<
td
width
=70
>
员工号:
</
td
>
<
td
>
<
input
type
="text"
name
="code"
validChar
="d{4}"
简易表单验证
本文介绍了一种使用自定义属性validChar和isRequired简化JavaScript表单验证的方法。通过遍历表单元素并与正则表达式匹配来实现对文本框的有效性和必填性的检查。
698

被折叠的 条评论
为什么被折叠?



