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

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

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

圖 1. 瀏覽器端驗(yàn)證原理圖

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

清單 1. 瀏覽器端 Javascript 驗(yàn)證代碼

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

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

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

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

清單 2. 服務(wù)器端表單的 PHP 驗(yàn)證

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

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

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

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

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

清單 3. 利用 DOM 技術(shù)實(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. 加載錯(cuò)誤信息效果圖

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

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

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

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

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

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

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

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

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

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

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