 |
|
|
 首页 |
名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash |
|
表单的验证是开发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的朋友可以自己扩充这个函数，相信可以满意大家的验证要求了。 返回类别: 教程 上一教程: ASP/ASP.NET下，中文文件名的处理攻略 下一教程: ASP多表单域无组件文件上传的例子 您可以阅读与"用ASP动态生成JAVASCRIPT的表单验证代码"相关的教程: · ASP动态生成的JAVASCRIPT表单验证代码 · 如何使用ASP制作模似动态生长的表单 · 如何使用ASP制作模似动态生长的表单? · 复杂表单的动态生成与动态验证 · ASP动态生成WBMP图片的程序 |
  |
| 快精灵印艺坊 版权所有 |
首页 会员中心在线印刷在线编辑付款方式索取样品设计指南连锁门店
|
||
