基于JavaScript的驗證表單通用方案的設計與應用

基于JavaScript的驗證表單通用方案的設計與應用計算機時代2010年第4期?43?JavaScript驗證表單通用方案的設計與應用徐衛(wèi)英(蘇州市職業(yè)大學計算機工程系,江蘇蘇州215001)摘要:表單是實現(xiàn)用戶交互式訪問wleb網(wǎng)頁的界面,向表單添加JavaScdpt,可以增加表單的動態(tài)交互性,驗證用戶輸入的數(shù)據(jù)等.文章介紹了利用JavaScdpt語言來驗證表單數(shù)據(jù)的一種通用方案,并通過一個示例描述了這種通用方案的實際應用.關鍵詞:JavaScript;客戶端;驗證;表單;方案DesignandApplicationofaGeneralSchemeforValidatingFormBasedonJavaScriptXUWei—ying(Dept.ofComputerEngineering,SuzhouVocationalUniversity,Suzhou,Jiangsu215001,China)interactivityoftheformandvalidateuserinputdata.AgeneralschemeusingJavaScripttovalidateformisintroduced,andanexampleisprovidedtodescribeitspracticalapplication.Keywords:JavaScript;client;validate;form;scheme0引言表單是HTML語言最有用的功能之一,通過它可收集用戶信息.向表單添加JavaScfipt,可以增加表單的動態(tài)交互性,驗證用戶輸入的數(shù)據(jù).如常用的用戶注冊界面,就是通過表單來提取用戶信息,實現(xiàn)交互式訪問的.用戶填寫表單之后,點擊表單上的Submit(提交)按鈕,將表單的信息發(fā)送到web服務器,由服務器端的應用程序(如CGI,ASP,ASPX,PHP或JSP此,在數(shù)據(jù)信息發(fā)送到服務器并存儲之前,要確保用戶在表單中輸入的數(shù)據(jù)是有效的,格式是正確的.檢驗數(shù)據(jù)(驗證表單)的方法主要有JavaScript,JScript和來解釋執(zhí)行,具有較好的兼容性和跨平臺性,得到了廣泛的應種通用方案,并通過一個示例描述這種通用方案的實際應用.驗證表單是JavaScript的常用功能之一.借助該功能,使用一個簡單腳本就可以讀取用戶在表單中輸入的數(shù)據(jù),并確保功能可以提醒用戶注意一些常見的錯誤并加以改正,而不必等待服務器的響應,從而減少服務器的處理任務,同時也提高了用戶的操作效率一.1通用方案的設計在一個Web網(wǎng)站中常有多個網(wǎng)頁包含表單,以前的方法是在每個網(wǎng)頁中嵌/X,<script>腳本代碼,分別驗證表單內(nèi)容,采用這種方法,網(wǎng)頁中將包含許多重復的代碼,代碼的重用性較差.現(xiàn)在我們設計的通用方案,為每個輸入字段創(chuàng)建單獨的驗證規(guī)則,存儲在一個獨立的外部腳本文件clientEventHandlers.js中,然后在有表單的網(wǎng)頁中分別調(diào)用這個文件,從而實現(xiàn)代碼的重復使用,提高編程效率.clientEventHandlers.js文件的部分主要代碼如下://函數(shù)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;)),/函數(shù)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:?),/函數(shù)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:),/函數(shù)fucPWDchk功能:檢查字符串是否含有非數(shù)字或字母.返回0則含有非數(shù)字或字母,返回1則全部為數(shù)字或字母.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:))函數(shù)fucCheckNUM的功能:檢查字符是否為數(shù)字.返回1則是數(shù)字,返回0則不是數(shù)字.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:),,函數(shù)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:),/函數(shù)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;)能:驗證數(shù)據(jù)有無非法字符,驗證數(shù)據(jù)的長度及類型,驗證日期格式是否正確,驗證E—mail地址是否有效,阻止不合法的數(shù)據(jù)被提交等.2驗證表單應用示例我們將以上的通用方案代碼應用到注冊,登錄,查詢,意見反饋,留言板等多種表單網(wǎng)頁中,用于表單數(shù)據(jù)驗證.下面以電子商務網(wǎng)站的客戶訂貨注冊表單為例,來說明表第一行為使用外部腳本3~ClientEventHandlers.js的方法;其余代碼行描述了本表單中驗證的數(shù)據(jù)內(nèi)容.需驗證的內(nèi)容如下:姓名是否為空,長度是否為l到4個字符;密碼是否由6到l2位字母或數(shù)字組成;用戶輸入的Email~是否有效(如電子郵件地址中必須有字符"@"和".");郵政編碼是否為數(shù)字;號碼是否為數(shù)字或"#"等有效字符;用戶輸入的訂貨日期是否符合日期的常規(guī)格式要求(如月份必須是1～12之間,日期必須在l一3l之間).<scriptlanguage=javascnptsrc=clientEventHandlers.js><lscript><script>nctionformlonsubmit0計算機時代2010年第4期?45?fname=.value;if(chkspc(name)==OIIfucCheckLength(name)<4){alert("請?zhí)顚懩男彰?姓名由1到4個字符組成."):.focus();returnfalse;)pwd=document.f0rm1.pwd.value;if(fucCheckLength(pwd)<611fucCheckLength(pwd)>1211fucPWDchk(pwd)==0){alert("密碼由6到12~-:字母或數(shù)字組成.")document.f0rm1.pwd.focus();returnfalse;)email=document.form1.email.value;if((chkspc(email)==O)I1(chkemail(email)==0)1I(fucCheckLength(email)>40))(alert("請?zhí)顚懻_的e-mail地址."):document.f0rm1.email.focus();returnfalse;)postcode=document.form1.postcode.value;if(chkspc(postcode)==011(fucCheckLength(postcode)>15)lIfucCheckNUM(postcode)==O){alert("請您填寫正確的郵政編碼,它由數(shù)字組成."):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("請?zhí)顚懩挠嗀浫掌?格式如2010-1—8.");document.f0rm1.date.focus();returnfalse;))<,script>3結(jié)束語本文提出了一種基于JavaScript的驗證表單數(shù)據(jù)的通用方ClientEventHandlers.js中,通過調(diào)用這個文件實現(xiàn)代碼復用.該方案能夠在多種環(huán)境下應用,其主要技術特點有:①跨平臺,跨瀏覽器運行;②用范例和實際運行表明,該方案簡潔實用,較好地滿足了通用性的應用需求.參考文獻:【1lTomNegrino,DoriSmith著,陳創(chuàng)甌等譯.JavaScript基礎赦程(第7版)fM1.人民郵電出版社,2009.【2】MichaelMoncur著,王軍譯.davaScript入門經(jīng)典(第4版)【M】.人民郵電出版社.2008.據(jù)提交[J】.江西理工大學,2009.2:31~33I4l張彥芳,謝虹.基于JavaScript的客戶端表單驗證【J】.生產(chǎn)一線,2009:33【5l徐衛(wèi)英.《腳本語言與動態(tài)網(wǎng)頁設計》謀程教學案例的設計【J】.蘇州大學,20o8?2:79—8■《上接第42頁)beginedit1.text:=outputstr