JavaScript - 表單驗證

表單驗證通常在伺服器端進行，客戶端輸入所有必要資料並點選提交按鈕後。如果客戶端輸入的資料不正確或缺失，伺服器必須將所有資料發回客戶端，並請求重新提交正確的表單資訊。這是一個漫長的過程，給伺服器帶來了很大的負擔。

JavaScript 提供了一種在將表單資料傳送到 Web 伺服器之前，在客戶端計算機上驗證表單資料的方法。表單驗證通常執行兩個功能。

基本驗證 - 首先，必須檢查表單以確保所有必填欄位都已填寫。這隻需要迴圈遍歷表單中的每個欄位並檢查資料。
資料格式驗證 - 其次，必須檢查輸入資料的格式和值是否正確。你的程式碼必須包含適當的邏輯來測試資料的正確性。

示例

我們將透過一個示例來理解驗證過程。這是一個簡單的 HTML 表單。

<html>   
   <head>
      <title>Form Validation</title>      
      <script type = "text/javascript">
         // Form validation code will come here.
      </script>      
   </head>
   
   <body>
      <form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
         <table cellspacing = "2" cellpadding = "2" border = "1">
            
            <tr>
               <td align = "right">Name</td>
               <td><input type = "text" name = "Name" /></td>
            </tr>
            
            <tr>
               <td align = "right">EMail</td>
               <td><input type = "text" name = "EMail" /></td>
            </tr>
            
            <tr>
               <td align = "right">Zip Code</td>
               <td><input type = "text" name = "Zip" /></td>
            </tr>
            
            <tr>
               <td align = "right">Country</td>
               <td>
                  <select name = "Country">
                     <option value = "-1" selected>[choose yours]</option>
                     <option value = "1">USA</option>
                     <option value = "2">UK</option>
                     <option value = "3">INDIA</option>
                  </select>
               </td>
            </tr>
            
            <tr>
               <td align = "right"></td>
               <td><input type = "submit" value = "Submit" /></td>
            </tr>
            
         </table>
      </form>      
   </body>
</html>

基本表單驗證

首先讓我們看看如何進行基本的表單驗證。在上例表單中，我們呼叫 **validate()** 函式在發生 **onsubmit** 事件時驗證資料。以下程式碼顯示了此 validate() 函式的實現。

<script type = "text/javascript">
   // Form validation code will come here.
   function validate() {
   
      if( document.myForm.Name.value == "" ) {
         alert( "Please provide your name!" );
         document.myForm.Name.focus() ;
         return false;
      }
      if( document.myForm.EMail.value == "" ) {
         alert( "Please provide your Email!" );
         document.myForm.EMail.focus() ;
         return false;
      }
      if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
         document.myForm.Zip.value.length != 5 ) {
         
         alert( "Please provide a zip in the format #####." );
         document.myForm.Zip.focus() ;
         return false;
      }
      if( document.myForm.Country.value == "-1" ) {
         alert( "Please provide your country!" );
         return false;
      }
      return( true );
   }
</script>

資料格式驗證

現在我們將看到如何在將輸入的表單資料提交到 Web 伺服器之前進行驗證。

以下示例顯示瞭如何驗證輸入的電子郵件地址。電子郵件地址必須至少包含一個“@”符號和一個點(.)。“@”不能是電子郵件地址的第一個字元，最後一個點必須至少在“@”符號之後一個字元。

示例

嘗試以下用於電子郵件驗證的程式碼：

<script type = "text/javascript">
   function validateEmail() {
      var emailID = document.myForm.EMail.value;
      atpos = emailID.indexOf("@");
      dotpos = emailID.lastIndexOf(".");
      
      if (atpos < 1 || ( dotpos - atpos < 2 )) {
         alert("Please enter correct email ID")
         document.myForm.EMail.focus() ;
         return false;
      }
      return( true );
   }
</script>

列印頁面