摘要：本文將列舉四種不同原理的表單驗證方法，并給出各方法在服務(wù)器上的實現(xiàn)。小結(jié)上述四種驗證方法各有優(yōu)缺點，用戶應(yīng)該根據(jù)需求選擇不同的方法。

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

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

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

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

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

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

清單 2. 服務(wù)器端表單的 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; 
 } 
}

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

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

圖 3. 服務(wù)器端驗證原理圖

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

清單 3. 利用 DOM 技術(shù)實現(xiàn)提示信息代碼

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. 加載錯誤信息效果圖

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

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

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

圖 5. 基于 Ajax 技術(shù)驗證原理圖

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

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

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

清單 4. 構(gòu)建驗證字段代碼

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 中處理，不同的格式需要不同的處理方法。在傳統(tǒng) Ajax 動態(tài)頁面處理中，回饋信息包含大量信息，采用 xml 格式，可以借助 DOM 技術(shù)處理，簡化程序。在本例中，回饋信息只包含驗證結(jié)果信息，簡單數(shù)據(jù)格式就能滿足要求，客戶端的 Javascript 分析回饋信息，根據(jù)結(jié)果確定是否提交完整的表單，具體實現(xiàn)請參考源代碼。

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

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