关于我们 广告服务 社区论坛
设为首页 加入收藏

行业新闻
服 务 器
模版下载
建站指南
冲浪宝典
办公软件
网站运营
操作系统
QQ 专题
网页制作
安全防御
视频教程
网络编程
SEO专区
软件下载
图像设计
Cisco
网页特效
Wap 技术
联盟赚钱
网页素材
 首页 | 企业建站 | 网页制作 | 网站运营 | 网络编程 | 图像设计 | 冲浪宝典 | 操作系统 | SEO专区 | 联盟赚钱 | Cisco

欢迎来到e天下网络首页>>网络编程>>ASP>>正文|用ASP动态生成JS的表单验证代码

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

[ 来路:21kn.com    时间:2007-7-8 0:46:44    点击: ]

 

  表单的验证是开发WEB应用程序中常遇到的一关。有时候我们必须保证表单的某些项必须填写、必须为数字、必须是指定的位数等等,这时候就要用到表单验证了,一般我们常用的表单验证有2种方式:
  1、编写JavaScript或VBScript的表单验证函数,在客户端进行验证;
  2、在表单提交后,使用ASP的方法Request.Form获取表单的输入值进行判断,然后返回结果,这是在服务端进行验证;

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

  上面解释了表单验证的2中方式,下面就具体来讲讲动态生成JavaScript的概念。为什么要动态生成呢?因为这种客户端的验证代码是很烦琐的,如果每次都要自己编写真是累啊!用惯DW(Dreamweaver)或UD的朋友可能通常使用表单验证的插件,使用后生成的代码也没有艺术感,而且很多是用不到的(代码冗余)。小田要讲的是,生成完全符合表单情况的代码。

  声明:小田对JavaScript并不精通,这里只是想谈谈动态生成的方法,JS的高手完全可以自己改。

  那么我们开始喽。

  1、我们先来看看一段简单的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函数的关键了。

  2、如何生成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是一个回车换行,&是连接符,&_是代码换行连接的字符。

  3、这段代码的头和尾是基本固定不变的,变化的是中间的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是怎么编的了。

  这里已经罗列了8种不同的情况的if判断语句,大家可以继续添加上去,注意这里的几个特别的部分,比如序号5email格式的判断(emailReg.test),这里用到了正则表达式,而正则表达式的定义,我们可以统一放在if判断的外面。

  4、函数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&_

  段代码就是正则表达式的定义了,大家可以根据需要扩充。

  5、使用方法。我们可以把这2段函数写在一个文件里,比如CheckForm_JS.asp,然后在要使用的页调用,比如:

<!--#include file="checkform_js.asp" -->
<%
Call checkform_js("frm","name|0|姓名必须填写,number|2|编号必须是数字,number|3|编号指定为6位数|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位数|6,"&_
   "email|5|email的格式不正确"
Call checkform_js("frm",errStr)
%>

  注意:由于函数中数组的分隔符是"|"和",",所以,errStr中的错误提示不能使用这2个字符,大家可以用全角的来代替。

  6、代码运行情况。以上代码运行后,就可以得到下面的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 ('编号指定为6位数');
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>

::::站长友情提示:多花一分钟学点什么都好::::

 

上一篇:对ASP动态包含文件方法的改进  下一篇:ASP 返回“Operation Must Use an Updateable Query”错误

 ::热点信息::

 

= = 免责声明 = =

① 欢迎转载我网所刊信息,请注明“来源:E天下网络”。
② 凡本网注明“来源:XXX(非E天下网络)”的作品,均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的,请在30日内进行。
※联系方式:Airtofly@163.com

::推荐文章::

 

ASP教程:详细学习ASP的内置对象

::图像设计::

 

动态图片搜索家——GIF RUNN
软件搜索利器——FileFerret
实例说明构图要讲规律
Character Builder让你尽展靓
全景图速成者Cool360
三维模型速成工具——Canoma
剪贴专家SmartBoard 32
新世纪的图像处理利器——Ph
更多内容..

 

 

关于我们 广告服务 友情链接 合作伙伴 社区论坛 免责声明

Copyright © 2007   21kn.com Inc. All rights reserved.e天下网络工作室

网站白天客服QQ:26875416 (非24小时)  合作QQ:597004688    粤ICP备06026423号