⽤ASP动态⽣成JS表单验证代码
表单的验证是开发WEB应⽤程序中常遇到的⼀关。有时候我们必须保证表单的某些项必须填写、必须为数字、必须是指定的位数等等，这时候就要⽤到表单验证了，⼀般我们常⽤的表单验证有２种⽅式：
１、编写javascript或VBScript的表单验证函数，在客户端进⾏验证；
２、在表单提交后，使⽤ASP的⽅法Request.Form获取表单的输⼊值进⾏判断，然后返回结果，这是在服务端进⾏验证；
这２种⽅式都有其优缺点，⽐如第１种⽅式速度⽐较快，⽽且通常使⽤警告框的⽅式，⽤户能够很快的根据提⽰完成表单的填写，但是缺点就是⽤户的浏览器必须是⽀持javascript脚本的，再不然如果他关闭了javascript，那就!@#$%&^*（⼩⽥已经倒在地上了^_^）；⽽第２种⽅式的兼容性⽐较好，但是缺点是速度⽐较慢（提交到服务端，在返回）⽽且使⽤也不⽅便。这次主要是⽤javascript的⽅法来验证，当然，如果同时⽤２种⽅式来验证是最保险了，不过（汗…………）要累死我们这些程序员了：）
上⾯解释了表单验证的２中⽅式，下⾯就具体来讲讲动态⽣成javascript的概念。为什么要动态⽣成呢？因为这种客户端的验证代码是很烦琐的，如果每次都要⾃⼰编写真是累啊！⽤惯DW( )或UD的朋友可能通常使⽤表单验证的插件，使⽤后⽣成的代码也没有艺术感，⽽且很多是⽤不到的（代码冗余）。⼩⽥要讲的是，⽣成完全符合表单情况的代码。
声明：⼩⽥对javascript并不精通，这⾥只是想谈谈动态⽣成的⽅法，JS的⾼⼿完全可以⾃⼰改。
那么我们开始喽。
１、我们先来看看⼀段简单的javascript的验证代码：
<script language=javascript>
<!--
//Power by xiaotian 2002
function checkSubmit()
{
if ((document.form1.name.value)==')
{
window.alert ('姓名必须填写');
document.form1.name.select();
document.form1.name.focus();
return false;
}
else
return true;
}
//-->
</script>
<form name="form1" >
<input type="text" name="name">
</form>
这段代码是验证表单form1的name表单项，必须填写内容。这⾥就有⼏个关键的部分：表单域名称、表单项名称、判断语句；这些就是我们下⾯编写ASP函数的关键了。
２、如何⽣成javascript代码。最简单的，就是⽤Response.Write输出了，⽐如把上⾯代码输出就可以是：
<%
Response.Write "<script language=javascript>"&vbCrlf&_
"<!--"&vbCrlf&_
"//Power by xiaotian 2002"&vbCrlf&_
"function checkSubmit()"&vbCrlf&_
"{"&vbCrlf&_
"if ((document.form1.name.value)==')"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('姓名必须填写');"&vbCrlf&_
"document.form1.name.select();"&vbCrlf&_
"document.form1.name.focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"else"&vbCrlf&_
"return true;"&vbCrlf&_
"}"&vbCrlf&_
"//-->"&vbCrlf&_
"</script>"&vbCrlf&_
%>
这⾥的vbCrlf是⼀个回车换⾏，&是连接符，&_是代码换⾏连接的字符。
３、这段代码的头和尾是基本固定不变的，变化的是中间的if判断部分，我们可以先把这部分写成函数，⼩⽥已经写好⼀个了，⼤家可以参考⼀下，下⾯是代码：
Function findJS(frmName,errStr)
Dim tmpArr
Dim i
'参数值
i=0
'获取错误列表，建⽴数组
tmpArr=Split(errStr,"|")
'输出查询条件
Select Case tmpArr(i+1)
Case "0" '必填的Text类型
findJS="if ((document."&frmName&"."&tmpArr(i)&".value)=="""")"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".select();"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
Case "1" '必填的ListMenu类型
findJS="if ((document."&frmName&"."&tmpArr(i)&".value)=="""")"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
Case "2" '必须为数字的Text类型
findJS="if (isNaN(document."&frmName&"."&tmpArr(i)&".value))"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".select();"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
Case "3" '必须为指定位数的Text类型
findJS="if (document."&frmName&"."&tmpArr(i)&".value.length="&tmpArr(i+3)&")"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".select();"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
Case "4" '必须⼤于指定位数的Text类型
findJS="if (document."&frmName&"."&tmpArr(i)&".value.length<"&tmpArr(i+3)&")"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".select();"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
Case "5" '必须为Email的Text类型
findJS="if ((!st(document."&frmName&"."&tmpArr(i)&".value))&&
(document."&frmName&"."&tmpArr(i)&".value!='))"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".select();"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
Case "6" '必须为a-z或0-9的字符的Text类型
findJS="if ((!st(document."&frmName&"."&tmpArr(i)&".value))&&
(document."&frmName&"."&tmpArr(i)&".value!='))"&vbCrlf&_
"{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".select();"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
Case "7" '确认密码和密码必须相等的Text类型
findJS="if ((document."&frmName&"."&tmpArr(i)&".value)!=(document."&frmName&"."&tmpArr(i+3)&".value))"&vbCrlf&_ "{"&vbCrlf&_
"window.alert ('"&tmpArr(i+2)&"');"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".select();"&vbCrlf&_
"document."&frmName&"."&tmpArr(i)&".focus();"&vbCrlf&_
"return false;"&vbCrlf&_
"}"&vbCrlf
'"else"&vbCrlf&_
'"return true;"&vbCrlf
Exit Function
End Select
End Function
其中参数frmName是指表单域的名称，⽽errStr是表单项＋判断类型＋出错提⽰的⼀个数组，其语法为：
"表单项名称1|判断类型1|出错提⽰1|[可选参数1]，表单项名称2|判断类型2|出错提⽰2|[可选参数2],..."
表单项名称：例如name等，是⾃定义的
判断类型：就是Case语句⾥的0,1,2,3等等
出错提⽰：例如 姓名必须填写 等，是⾃定义的
可选参数：⽐如在判断确认密码和密码必须相等的Text类型时，可选参数就是想要判断相当的密码表单项名称；在必须为指定位数的Text类型时，可选参数就是指定的位数。当然可以选参数可以是好⼏个，具体就看你Case语句⾥的if是怎么编的了。
这⾥已经罗列了８种不同的情况的if判断语句，⼤家可以继续添加上去，注意这⾥的⼏个特别的部分，
⽐如序号５email格式的判断（st），这⾥⽤到了正则表达式，⽽正则表达式的定义，我们可以统⼀放在if判断的外⾯。
４、函数CheckForm_JS(frmName,errStr)。这个函数的作⽤是最后将⼀个个javascript的if判断整合起来，代码如下：
Sub CheckForm_JS(frmName,errStr)
Dim tmpArr
Dim i
Dim strShow '输出JS的字符串
'获取错误列表，建⽴数组
tmpArr=Split(errStr,",")
'写JS
for i=0 to UBound(tmpArr)
if i<>0 then
strShow=strShow&"else "&findJS(frmName,tmpArr(i))
else
strShow=strShow&findJS(frmName,tmpArr(i))
end if
next
'输出
strShow="<script language=javascript>"&vbCrlf&_
"<!--"&vbCrlf&_
"//Power by xiaotian 2002"&vbCrlf&_
"function checkSubmit()"&vbCrlf&_
"{"&vbCrlf&_
"var emailReg = /^[_a-z0-9]+@([_a-z0-9]+/.)+[a-z0-9]{2,3}$/;"&vbCrlf&_
"var pwdReg = /[a-z0-9]$/;"&vbCrlf&_
strShow&_
"else"&vbCrlf&_
"return true;"&vbCrlf&_
"}"&vbCrlf&_
"//-->"&vbCrlf&_
"</script>"
Response.Write strShow
End Sub
⼤家注意到这⾥的⼀段：
if i<>0 then
strShow=strShow&"else "&findJS(frmName,tmpArr(i))
else
strShow=strShow&findJS(frmName,tmpArr(i))
end if
作⽤是把第1个以后javascript的if语句写成else if，⽽
"var emailReg = /^[_a-z0-9]+@([_a-z0-9]+/.)+[a-z0-9]{2,3}$/;"&vbCrlf&_
"var pwdReg = /[a-z0-9]$/;"&vbCrlf&_
段代码就是正则表达式的定义了，⼤家可以根据需要扩充。
５、使⽤⽅法。我们可以把这２段函数写在⼀个⽂件⾥，⽐如CheckForm_JS.asp，然后在要使⽤的页调⽤，⽐如：
<!--#include file="checkform_js.asp" -->
<%
Call checkform_js("frm","name|0|姓名必须填写,number|2|编号必须是数字,number|3|编号指定为６位数|6,email|5|email的格式不正确")
%>
<form name="frm" >
姓名：<input type="text" name="name">
编号：<input type="text" name="number">
email：<input type="text" name="email">
<input type="submit" name="submit" value="提交">
</form>
在实际的使⽤中，errStr可能会是很长的字符串，书写中我们可以⽤⼀断⾏的⽅法写，⽐如上⾯的errStr我们可以这样写：
<%
Dim errStr
errStr="name|0|姓名必须填写,"&_
"number|2|编号必须是数字,number|3|编号指定为６位数|6,"&_
"email|5|email的格式不正确"
Call checkform_js("frm",errStr)
%>
注意：由于函数中数组的分隔符是"|"和","，所以，errStr中的错误提⽰不能使⽤这２个字符，⼤家可以⽤全⾓的来代替。
６、代码运⾏情况。以上代码运⾏后，就可以得到下⾯的javascript：
<script language=javascript>
<!--
//Power by xiaotian 2002
function checkSubmit()
{
var emailReg = /^[_a-z0-9]+@([_a-z0-9]+/.)+[a-z0-9]{2,3}$/;
var pwdReg = /[_a-z0-9]$/;
if ((document.frm.name.value)=="")
{
window.alert ('姓名必须填写');
document.frm.name.select();
document.frm.name.focus();
return false;
}
else if (isNaN(document.frm.number.value))
{
window.alert ('编号必须是数字');
document.frm.number.select();
document.frm.number.focus();
js正则表达式判断数字return false;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论