基于JavaScript的验证表单通用方案的设计与应用

基于JavaScript的验证表单通用方案的设计与应用计算机时代2010年第4期?43?JavaScript验证表单通用方案的设计与应用徐卫英(苏州市职业大学计算机工程系,江苏苏州215001)摘要:表单是实现用户交互式访问wleb网页的界面,向表单添加JavaScdpt,可以增加表单的动态交互性,验证用户输入的数据等.文章介绍了利用JavaScdpt语言来验证表单数据的一种通用方案,并通过一个示例描述了这种通用方案的实际应用.关键词:JavaScript;客户端;验证;表单;方案DesignandApplicationofaGeneralSchemeforValidatingFormBasedonJavaScriptXUWei—ying(Dept.ofComputerEngineering,SuzhouVocationalUniversity,Suzhou,Jiangsu215001,China)interactivityoftheformandvalidateuserinputdata.AgeneralschemeusingJavaScripttovalidateformisintroduced,andanexampleisprovidedtodescribeitspracticalapplication.Keywords:JavaScript;client;validate;form;scheme0引言表单是HTML语言最有用的功能之一,通过它可收集用户信息.向表单添加JavaScfipt,可以增加表单的动态交互性,验证用户输入的数据.如常用的用户注册界面,就是通过表单来提取用户信息,实现交互式访问的.用户填写表单之后,点击表单上的Submit(提交)按钮,将表单的信息发送到web服务器,由服务器端的应用程序(如CGI,ASP,ASPX,PHP或JSP此,在数据信息发送到服务器并存储之前,要确保用户在表单中输入的数据是有效的,格式是正确的.检验数据(验证表单)的方法主要有JavaScript,JScript和来解释执行,具有较好的兼容性和跨平台性,得到了广泛的应种通用方案,并通过一个示例描述这种通用方案的实际应用.验证表单是JavaScript的常用功能之一.借助该功能,使用一个简单脚本就可以读取用户在表单中输入的数据,并确保功能可以提醒用户注意一些常见的错误并加以改正,而不必等待服务器的响应,从而减少服务器的处理任务,同时也提高了用户的操作效率一.1通用方案的设计在一个Web网站中常有多个网页包含表单,以前的方法是在每个网页中嵌/X,<script>脚本代码,分别验证表单内容,采用这种方法,网页中将包含许多重复的代码,代码的重用性较差.现在我们设计的通用方案,为每个输入字段创建单独的验证规则,存储在一个独立的外部脚本文件clientEventHandlers.js中,然后在有表单的网页中分别调用这个文件,从而实现代码的重复使用,提高编程效率.clientEventHandlers.js文件的部分主要代码如下://函数chksDc的功能:检查字符串是否含有空格.如果是,返回0,否则返回1.functionchkspc(a){vari=a.1ength;var_i=O:vark=0:while(k<i),{if(a.charAt(k)!=…')j_j+1;k=k+l:.)if0==0){returnO:)if(i~--j){return2:)else{return1;)),/函数chkemail的功能:检查字符串是否为合格的EmailAddress.如果是,则返回0,否则返回1.functionchkemail(a){vari=a.1ength;vartemp=a.indexOf('@.):vartempd=a.indexOf('.'):if(temp>1){if((i-temp)>3){if((i-tempd)>0){return1:))}return0:?),/函数chkdate的功能:检查字符串是否为日期.返回0则不是日期,返回1则是日期.functionchkdate(datestr)(vatIthdatestr;if(datestd="")Ithdatestr=datestr.1ength;elseIthdatestr=0;vartmpy="":vattmpm=….:vartmpd=':varstatus;status=0if(Ithdatestr==O)returnO;for(i=0;i<lthdatestr;i++){if(datestr.charAt(i)=='-'){status++;)if(status>2){return0;)if((status==0)&&(datestr.charAt(i)!='一.)){tmpy=tmpy+datestr.charAt(i);)if((status==1)&&(datestr.charAt(i)!='一')){tmpm=tmpm+datestr.charAt(i);)if((status==2)&&(datestr.charAt(i)!='一')){tmpd=tmpd+datestr.charAt(i);))year=newString(tmpy);month=newString(tmpm);day=newString(tmpd)if((tmpy.1engthT=4)II(1mpm.1ength>2)ll(tmpd.1ength>2)){returnO:)if(!((1<=month)&&(12>=m0nth)&&(31>=day)&&(1<=day))){returnO:)if(!((year%4)==0)&&(month==2)&&(day==29)){return0:)if((month<=7)&&((m0nth%2)==0)&&(day>=31)){return0:}if((month>=8)&&((month%2)==1)&&(day>=31)){return0:)if((month==2)&&(day==30)){returnO:)return1:),/函数fucPWDchk功能:检查字符串是否含有非数字或字母.返回0则含有非数字或字母,返回1则全部为数字或字母.functionfucPWDchk(str){varstrSource="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVW×YZ":vatch;vari:vartemp:for(._O:i<=(str.1ength一1):i++){ch=str.charAt(i);temp=strSource.indexOf(ch);if(temp==-1){return0:))if(strSource.indexOf(ch)==-1){return0;)else{return1:))函数fucCheckNUM的功能:检查字符是否为数字.返回1则是数字,返回0则不是数字.functionfucCheckNUM(NUM){vati,j,strTemp;strTemp="0123456789:,if(NUM.1ength==0)return0:for(__0:i<NUM.1ength;I++){j=strTemp.indexOf(NUM.charAt(i));if0=_-1){return0;})return1:),,函数fucCheckTEL的功能:检查字符串是否为号码.返回1则是合法的号码,返回0则为不合法.functionfucCheckTEL(TEL){vari,j,strTemp;strTemp="0123456789-(":for(._0:i<TEL.1ength;i++){j=strTemp.indexOf(TEL.charAt(i));if0==-1){return0:))return1:),/函数fucCheckLength的功能:检查字符串的长度.返回值为字符串的长度.functionfucCheckLength(strTemp){vari.sum;sum=0;for(i=0;i<strTemp.1ength;i++1{if((strTemp.charCodeAl(i)>=0)&&(strTemp.charCodeAt(i)<=255))sum=sum+l:elsesum=sum+2;)returnsum;)能:验证数据有无非法字符,验证数据的长度及类型,验证日期格式是否正确,验证E—mail地址是否有效,阻止不合法的数据被提交等.2验证表单应用示例我们将以上的通用方案代码应用到注册,登录,查询,意见反馈,留言板等多种表单网页中,用于表单数据验证.下面以电子商务网站的客户订货注册表单为例,来说明表第一行为使用外部脚本3~ClientEventHandlers.js的方法;其余代码行描述了本表单中验证的数据内容.需验证的内容如下:姓名是否为空,长度是否为l到4个字符;密码是否由6到l2位字母或数字组成;用户输入的Email~是否有效(如电子邮件地址中必须有字符"@"和".");邮政编码是否为数字;号码是否为数字或"#"等有效字符;用户输入的订货日期是否符合日期的常规格式要求(如月份必须是1～12之间,日期必须在l一3l之间).<scriptlanguage=javascnptsrc=clientEventHandlers.js><lscript><script>nctionformlonsubmit0计算机时代2010年第4期?45?fname=.value;if(chkspc(name)==OIIfucCheckLength(name)<4){alert("请填写您的姓名,姓名由1到4个字符组成."):.focus();returnfalse;)pwd=document.f0rm1.pwd.value;if(fucCheckLength(pwd)<611fucCheckLength(pwd)>1211fucPWDchk(pwd)==0){alert("密码由6到12~-:字母或数字组成.")document.f0rm1.pwd.focus();returnfalse;)email=document.form1.email.value;if((chkspc(email)==O)I1(chkemail(email)==0)1I(fucCheckLength(email)>40))(alert("请填写正确的e-mail地址."):document.f0rm1.email.focus();returnfalse;)postcode=document.form1.postcode.value;if(chkspc(postcode)==011(fucCheckLength(postcode)>15)lIfucCheckNUM(postcode)==O){alert("请您填写正确的邮政编码,它由数字组成."):document.f0rm1.postcode.focus();returnfalse;)usephone=document.f0rm1.usephone.value;if(usephone=="lIchkspc(usephone)==OllfucCheckLength(usephone)>3OIIfucCheckTEL(usephone)==O){alert("您的常用号码填写有误."):document.f0rm1.usephone.focus();returnfalse;)date=document.form1.date.value;jf(chkspc(date)==OIIchkdate(date)==O){alert("请填写您的订货日期,格式如2010-1—8.");document.f0rm1.date.focus();returnfalse;))<,script>3结束语本文提出了一种基于JavaScript的验证表单数据的通用方ClientEventHandlers.js中,通过调用这个文件实现代码复用.该方案能够在多种环境下应用,其主要技术特点有:①跨平台,跨浏览器运行;②用范例和实际运行表明,该方案简洁实用,较好地满足了通用性的应用需求.参考文献:【1lTomNegrino,DoriSmith着,陈创瓯等译.JavaScript基础赦程(第7版)fM1.人民邮电出版社,2009.【2】MichaelMoncur着,王军译.davaScript入门经典(第4版)【M】.人民邮电出版社.2008.据提交[J】.江西理工大学,2009.2:31~33I4l张彦芳,谢虹.基于JavaScript的客户端表单验证【J】.生产一线,2009:33【5l徐卫英.《脚本语言与动态网页设计》谋程教学案例的设计【J】.苏州大学,20o8?2:79—8■《上接第42页)beginedit1.text:=outputstr