<form id="hz9zz"></form>
  • <form id="hz9zz"></form>

      <nobr id="hz9zz"></nobr>

      <form id="hz9zz"></form>

    1. 明輝手游網中心:是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺!

      用ASP動態生成JavaScript的表單驗證代碼

      [摘要]表單的驗證是開發WEB應用程序中常遇到的一關。有時候我們必須保證表單的某些項必須填寫、必須為數字、必須是指定的位數等等,這時候就要用到表單驗證了,一般我們常用的表單驗證有2種方式: 1、編寫Java...
      表單的驗證是開發WEB應用程序中常遇到的一關。有時候我們必須保證表單的某些項必須填寫、必須為數字、必須是指定的位數等等,這時候就要用到表單驗證了,一般我們常用的表單驗證有2種方式:
      1、編寫JavaScript或VBScript的表單驗證函數,在客戶端進行驗證;
      2、在表單提交后,使用ASP的方法Request.Form獲取表單的輸入值進行判斷,然后返回結果,這是在服務端進行驗證;

        這2種方式都有其優缺點,比如第1種方式速度比較快,而且通常使用警告框的方式,用戶能夠很快的根據提示完成表單的填寫,但是缺點就是用戶的瀏覽器必須是支持JavaScript腳本的,再不然如果他關閉了JavaScript,那就!@#$%&^*(小田已經倒在地上了^_^);而第2種方式的兼容性比較好,但是缺點是速度比較慢(提交到服務端,在返回)而且使用也不方便。這次主要是用JavaScript的方法來驗證,當然,如果同時用2種方式來驗證是最保險了,不過(汗…………)要累死我們這些程序員了:)

        上面解釋了表單驗證的2中方式,下面就具體來講講動態生成JavaScript的概念。為什么要動態生成呢?因為這種客戶端的驗證代碼是很煩瑣的,如果每次都要自己編寫真是累。∮脩TDW(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>

        熟悉JS的朋友可以自己擴充這個函數,相信可以滿足大家的驗證要求了。

      函數打包下載:http://www.10fber.com/mylesson/asp2js/checkform_js.zip



      日韩精品一区二区三区高清