摘要：本文將列舉四種不同原理的表單驗證方法，并給出各方法在服務器上的實現。小結上述四種驗證方法各有優缺點，用戶應該根據需求選擇不同的方法。

任何可以交互的站點都有輸入表單，只要有可能，就應該對用戶輸入的數據進行驗證。無論服務器后端是什么樣的系統，都不愿意把時間浪費在一些無效的信息上，必須對表單數據進行校驗，若有不符合規定的表單輸入，應及時返回并給出相應的提示信息。本文將列舉四種不同原理的表單驗證方法，并給出各方法在 PHP 服務器上的實現。

傳統上，表單數據一般都通過瀏覽器端的 Javascript 驗證。瀏覽器端的驗證速度快，若有不符合要求的輸入，響應信息快速的返回給用戶。由于驗證數據不需要提交給服務器，不會加重服務器的負載。一個瀏覽器端驗證的過程如圖 1 所示，表單提交，若通過驗證則提交服務器處理，不成功則回饋給用戶。

圖 1. 瀏覽器端驗證原理圖

本文給出的各種表單驗證方法 源代碼 均以一個簡單的表單為例，該表單包含“UserName”和“Password”兩個文本輸入框，及一個“Submit”按鈕。代碼清單 1 給出了瀏覽器端 Javascript 驗證的例子。若“UserName”或“Password”輸入不符合要求，通過彈出框的形式提示用戶，并返回 false, 停止表單提交。

清單 1. 瀏覽器端 Javascript 驗證代碼

function validform(thisForm) 
  { 
     error_string = ""; 
     if((message=checkusername(thisForm.username))!="") 
       { 
         error_string="UserName:"
         error_string += message; 
         alert(error_string); 
         return false; 
        } 
     if((message = checkpassword(thisForm.pass))!="") 
       { 
         error_string="Password:"
         error_string += message; 
         alert(error_string); 
         return false; 
        }   
      return true；
   }

從圖 1 可以看出這種表單驗證方法有一個致命的缺點，很多工具可以在表單檢驗過后、瀏覽器發送請求前截取表單數據，攻擊者可以修改請求中的數據，從而繞過 JavaScript，將惡意數據注入服務器，這樣會增加 XSS（全稱 Cross Site Scripting）攻擊的機率。對于一般的網站，都不贊成采用瀏覽器端的表單驗證方法。

瀏覽器端和服務器端雙重驗證方法在瀏覽器端驗證方法基礎上增加服務器端的驗證，其原理如圖 2 所示，該方法增加服務器端的驗證，彌補了傳統瀏覽器端驗證的缺點。若表單輸入不符合要求，瀏覽器端的 Javascript 驗證能很快地給出響應，而服務器端的驗證則可以防止惡意用戶繞過 Javascript 驗證，保證最終數據的準確性。

圖 2. 瀏覽器端和服務器端雙重驗證原理圖

除了客戶端 Javascript 驗證，該方法增加了服務器端的 PHP 驗證，示例代碼如清單 2 所示，checkusername() 和 checkpassword() 是 PHP 語言 編寫的兩個驗證接口函數，根據 $error 結果，確定表單的有效性。

清單 2. 服務器端表單的 PHP 驗證

if(isset($_POST["username"])) 
{ 
 $usermsg  = checkusername($_POST["username"]); 
 if($usermsg != "") 
   $error = true; 
 if(isset($_POST["pass"])) 
 { 
   $passmsg = checkpassword($_POST["pass"]); 
   if($passmsg != "") 
   $error = true; 
 } 
}

此方法的缺點一目了然，必須維護兩份代碼實現相同的功能，增加開發人員的工作量，不利于后續開發。瀏覽器端和服務器端雙重驗證方法也存在一個風險，對有些表單驗證的規則服務器也許不想公開給用戶，而瀏覽器拷貝了服務器端驗證的功能，向用戶公布驗證規則。

綜合上述兩種驗證方法，現在考慮使用服務器端的驗證方法，該方法結構非常簡單，其原理如圖 3 所示。客戶端負責表單提交，服務器端驗證表單，若發現錯誤數據，則回傳表單頁面，錯誤信息被加到同一頁面中。若驗證通過，則處理表單。

圖 3. 服務器端驗證原理圖

此方法在遇到非法輸入需要回傳表單時，除了加載錯誤提示信息在此頁面上，還必須注意，此時表單內容必須維持表單提交時的用戶輸入，這樣用戶才能將錯誤的表單輸入與錯誤提示信息聯系起來，有助于用戶填入正確的輸入。可以借助 DOM 技術 中的 appendChild 功能追加顯示相關的錯誤的提示信息，其實現如代碼清單 3 所示，其效果可以參考圖 4。

清單 3. 利用 DOM 技術實現提示信息代碼

find_obj = document.getElementsByName("username"); 
 var sp1 = document.createElement("span"); 
 sp1.className= "formerror"; 
 sp1.appendChild(document.createTextNode(usermsg)); 
 find_obj[0].parentNode.appendChild(sp1); 
 
 find_obj = document.getElementsByName("pass"); 
 var sp2 = document.createElement("span"); 
 sp2.className= "formerror"; 
 sp2.appendChild(document.createTextNode(passmsg)); 
 find_obj[0].parentNode.appendChild(sp2);

圖 4. 加載錯誤信息效果圖

由于驗證交由服務器端處理，該方法的輸入響應速度不如瀏覽器端驗證，主要受網絡繁忙及服務器荷載的影響。同時，若同一頁面的其他表單耗時較大，此回傳頁面方法的響應時間會進一步加大。

基于 Ajax 技術的表單驗證技術綜合了服務器端驗證，瀏覽器端及服務器端雙重驗證方法的優點，摒棄了兩者的缺點。服務器端驗證方法結構清晰，可以防止惡意攻擊，其主要問題在于若輸入錯誤表單信息，需重傳整個頁面，同時若同一頁面有多個表單，回傳整個頁面可能會增加用戶等待的時間。瀏覽器端及服務器端的雙重驗證響應速度快，其問題在于代碼冗余。

基于 Ajax 技術的驗證方法也需要做兩次驗證：首先是回饋驗證，無論表單數據準確與否，服務器均給出反饋信息，其作用等同于雙重驗證中的瀏覽器端的驗證；表單處理前的驗證防止惡意修改，其作用等同于雙重驗證中的服務器端的驗證。其原理如圖 5 所示，一旦有表單提交，首先構建表單信息字段，交由 Ajax engine 發送給服務器端驗證，服務器將驗證結果發送給用戶，客戶端根據回饋信息，判斷表單輸入是否正常，在 Ajax 技術下，對用戶而言，以上操作均在后臺運行，不會影響當前頁面各表單的狀態。若是非法輸入，則回饋提示信息給用戶；若是正常輸入，客戶端將按照正常方法提交表單。為了防止惡意修改，表單處理之前還需驗證，此步驗證與之前驗證共用代碼。

圖 5. 基于 Ajax 技術驗證原理圖

有關 Ajax 技術的知識，可以參考 developerWorks 上的 系列文章。Ajax 核心概念之一是 XMLHttpRequest 對象，這是一個 JavaScript 對象，創建該對象時，各種瀏覽器方法有所不同，具體實現可以參考 源代碼。

回饋驗證主要涉及兩個問題：首先是構建驗證字段，其次是回饋信息的格式。

由于驗證字段和正常表單字段共用驗證代碼，驗證字段格式完全遵循表單提交時的格式。為某表單構建驗證字段代碼如清單 4 所示。其中 checkflag 字段的作用是區分兩種驗證。

清單 4. 構建驗證字段代碼

var postData = ""; 
var fields = form.elements; 
for (var i=0; i < fields.length; i++) { 
if (fields[i].name != "") { 
     type = fields[i].type; 
      if ((type == "radio") || (type == "checkbox")) { 
        if (!fields[i].checked) { continue; } 
   } 
if ((type == "submit")&&(!(fields[i].name == submitName))) { 
      continue; 
} 
if (postData) { postData += "&"; } 
postData += fields[i].name + "=" + encodeURIComponent(fields[i].value); 
         } 
} 
    postData += "&checkflag=1";

回饋信息主要在瀏覽端的 Javascript 中處理，不同的格式需要不同的處理方法。在傳統 Ajax 動態頁面處理中，回饋信息包含大量信息，采用 xml 格式，可以借助 DOM 技術處理，簡化程序。在本例中，回饋信息只包含驗證結果信息，簡單數據格式就能滿足要求，客戶端的 Javascript 分析回饋信息，根據結果確定是否提交完整的表單，具體實現請參考源代碼。

基于 Ajax 技術的驗證方法代碼相對比較復雜，錯誤的表單需要來回兩次網絡交互，而正確的提交則需要三次網絡交互。該驗證方法的響應時間與網絡繁忙程度有很大的關系。相對于純服務器端驗證，該方法在驗證階段不需要重新下載整個頁面，在多個表單共存在同一頁面的場合，基于 Ajax 技術的驗證方法不會影響同一頁面的其它表單。

上述四種驗證方法各有優缺點，用戶應該根據需求選擇不同的方法。瀏覽器端驗證方法適用于對表單輸入要求并不是特別嚴格的場所；瀏覽器端和服務器端雙重驗證應用比較廣泛，但是該方法不利于后續開發；服務器端驗證方法結構簡單，但是開發代碼相對復雜；基于 Ajax 技術的驗證方法，對網絡的要求高，但是該方法結構清晰，表單驗證與表單處理過程分離但共用驗證代碼，簡化開發人員的工作。