用ASP动态生成JavaScript的表单验证代码

今天是：

首页 ┆ 信息查询 ┆ 网站SEO查询工具 ┆ CSS编辑器 ┆ 建站素材

软件新闻

操作系统

Vista Winxp Win2003 Linux Windows综合

工具软件

系统工具媒体工具网络工具杀毒软件聊天

软件开发

C教程 C++ Java C# ASP.NET JSP PHP

数据库

Oracle MySQL DB2 SQL Server Sybase

安全

网络病毒

办公应用

Word Excel Powerpoint Outlook 其他

平面设计

Photoshop Fireworks Coreldraw Flash Illustrator 3dsmax

网站运营

网站运营网站优化网站策划策划书下载建站心得站长故事网站盈利网页制作网页特效 建站素材 免费资源 QQ频道

当前位置：首页 >> 软件开发 >> ASP教程 >> 用ASP动态生成JavaScript的表单验证代码

发布于2005-11-18 16:24 来源：网海拾贝

　　表单的验证是开发WEB应用程序中常遇到的一关。有时候我们必须保证表单的某些项必须填写、必须为数字、必须是指定的位数等等，这时候就要用到表单验证了，一般我们常用的表单验证有２种方式：

１、编写JavaScript或VBScript的表单验证函数，在客户端进行验证；
２、在表单提交后，使用ASP的方法Request.Form获取表单的输入值进行判断，然后返回结果，这是在服务端进行验证；

　　这２种方式都有其优缺点，比如第１种方式速度比较快，而且通常使用警告框的方式，用户能够很快的根据提示完成表单的填写，但是缺点就是用户的浏览器必须是支持JavaScript脚本的，再不然如果他关闭了JavaScript，那就!@# $%&^*（小田已经倒在地上了^_^）；而第２种方式的兼容性比较好，但是缺点是速度比较慢（提交到服务端，在返回）而且使用也不方便。这次主要是用JavaScript的方法来验证，当然，如果同时用２种方式来验证是最保险了，不过（汗…………）要累死我们这些程序员了：）

　　上面解释了表单验证的２中方式，下面就具体来讲讲动态生成JavaScript的概念。为什么要动态生成呢？因为这种客户端的验证代码是很烦琐的，如果每次都要自己编写真是累啊！用惯DW(Dreamweaver)或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" onsubmit="javascript:return checkSubmit()"> 
<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 ((!emailReg.test(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 ((!pwdReg.test(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格式的判断（emailReg.test），这里用到了正则表达式，而正则表达式的定义，我们可以统一放在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" onsubmit="javascript:return checkSubmit()">
姓名：<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();
return false;
}
else if (document.frm.number.value.length=6)
{
window.alert ('编号指定为６位数');
document.frm.number.select();
document.frm.number.focus();
return false;
}
else if ((!emailReg.test(document.frm.email.value))&&(document.frm.email.value!=''))
{
window.alert ('email的格式不正确');
document.frm.email.select();
document.frm.email.focus();
return false;
}
else
return true;
}
//-->
</script>

熟悉JS的朋友可以自己扩充这个函数，相信可以满足大家的验证要求了。

函数打包下载：

附件下载：

1. 函数.rar

中查找“用ASP动态生成JavaScript的表单验证代码”更多相关内容

中查找“用ASP动态生成JavaScript的表单验证代码”更多相关内容

上一篇：ASP通用分页类
下一篇：ASP小偷(远程数据获取)程序的入门教程