四種表單驗證方法的分析和比較

1、四種表單驗證方法的分析和比較前言任何可以交互的站點都有輸入表單，只要有可能，就應該對用戶輸入的數(shù)據(jù)進行驗證。無論服務器后端是什么 樣的系統(tǒng)，都不愿意把時間浪費在一些無效的信息上，必須 對表單數(shù)據(jù)進行校驗，若有不符合規(guī)定的表單輸入，應及時 返回并給出相應的提示信息。本文將列舉四種不同原理的表 單驗證方法，并給出各方法在 PHP 服務器上的實現(xiàn)。回頁 首瀏覽器端驗證傳統(tǒng)上，表單數(shù)據(jù)一般都通過瀏覽器端的Javascript 驗證。瀏覽器端的驗證速度快，若有不符合要求 的輸入，響應信息快速的返回給用戶。由于驗證數(shù)據(jù)不需要 提交給服務器，不會加重服務器的負載。一個瀏覽器端驗證 的過程如圖 1 所示，表單

2、提交，若通過驗證則提交服務器 處理，不成功則回饋給用戶。圖 1. 瀏覽器端驗證原理圖本 文給出的各種表單驗證方法 源代碼 均以一個簡單的表單 為例，該表單包含“ UserName”和“ Password”兩個文本輸入框，及一個“ Submit ”按鈕。代碼清單 1 給出了瀏覽器端Javascript 驗證的例子。若“ UserName”或“ Password”輸false,入不符合要求，通過彈出框的形式提示用戶，并返回 停止表單提交。清單 1. 瀏覽器端 Javascript 驗證代碼function validform(thisForm)error_string = ""

3、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;re

4、turn true ； 從圖 1 可以看出這種表單驗證方法有一個致命的缺點，很多工具可以在表單檢驗過后、瀏覽器發(fā)送請求前截取 表單數(shù)據(jù)，攻擊者可以修改請求中的數(shù)據(jù)，從而繞過JavaScript,將惡意數(shù)據(jù)注入服務器，這樣會增加XSS （全 稱 Cross Site Scripting ）攻擊的機率。對于一般的網(wǎng)站，都 不贊成采用瀏覽器端的表單驗證方法。回頁首瀏覽器端和服2務器端雙重驗證瀏覽器端和服務器端雙重驗證方法在瀏覽 器端驗證方法基礎上增加服務器端的驗證，其原理如圖所示，該方法增加服務器端的驗證，彌補了傳統(tǒng)瀏覽器端驗證的缺點。若表單輸入不符合要求，瀏覽器端的Javascript驗證能很快地

5、給出響應，而服務器端的驗證則可以防止惡意用戶繞過 Javascript 驗證，保證最終數(shù)據(jù)的準確性。 圖 2. 瀏覽器端和服務器端雙重驗證原理圖除了客戶端Javascript驗證，該方法增加了服務器端的 PHP 驗證，示例代碼如清 單 2 所示，checkusername()和 check password。是 PHP 語 言 編寫的兩個驗證接口函數(shù)，根據(jù) $error 結(jié)果，確定表單 的有效性。清單 2. 服務器端表單的 PHP 驗證if(isset($_POST'username')$usermsg = checkusername($_POST'username&#

6、39;);if($usermsg != '')$error = true;if(isset($_POST'pass')$passmsg = checkpassword($_POST'pass');if($passmsg != '') $error = true; 此方法的缺點一目了然，必須維護兩份代碼實現(xiàn)相同的功 能，增加開發(fā)人員的工作量，不利于后續(xù)開發(fā)。瀏覽器端和 服務器端雙重驗證方法也存在一個風險，對有些表單驗證的 規(guī)則服務器也許不想公開給用戶，而瀏覽器拷貝了服務器端 驗證的功能，向用戶公布驗證規(guī)則?；仨撌追掌鞫蓑炞C綜 合上

7、述兩種驗證方法，現(xiàn)在考慮使用服務器端的驗證方法， 該方法結(jié)構(gòu)非常簡單，其原理如圖 3 所示?？蛻舳素撠煴?單提交，服務器端驗證表單，若發(fā)現(xiàn)錯誤數(shù)據(jù)，則回傳表單 頁面，錯誤信息被加到同一頁面中。若驗證通過，則處理表 單。圖 3. 服務器端驗證原理圖此方法在遇到非法輸入需要 回傳表單時，除了加載錯誤提示信息在此頁面上，還必須注 意，此時表單內(nèi)容必須維持表單提交時的用戶輸入，這樣用戶才能將錯誤的表單輸入與錯誤提示信息聯(lián)系起來，有助于用戶填入正確的輸入。可以借助 DOM 技術中的appendChild 功能追加顯示相關的錯誤的提示信息，其實現(xiàn) 如代碼清單 3 所示，其效果可以參考圖 4。清單 3. 利

8、用DOM 技術實現(xiàn)提示信息代碼 find_obj = document.getElementsByName("username");var sp1 = document.createElement('span');sp1.className= 'formerror'sp1.appendChild(document.createTextNode(usermsg);find_obj0.parentNode.appendChild(sp1); find_obj =document.getElementsByName("pass"

9、);var sp2 = document.createElement('span');sp2.className= 'formerror'sp2.appendChild(document.createTextNode(passmsg);find_obj0.parentNode.appendChild(sp2); 圖 4. 加載錯誤信息效果圖由于驗證交由服務器端處理，該方法的輸入響應速 度不如瀏覽器端驗證，主要受網(wǎng)絡繁忙及服務器荷載的影 響。同時，若同一頁面的其他表單耗時較大，此回傳頁面方 法的響應時間會進一步加大?；仨撌谆?Ajax 技術的驗證 基于 Ajax

10、 技術的表單驗證技術綜合了服務器端驗證，瀏覽 器端及服務器端雙重驗證方法的優(yōu)點，摒棄了兩者的缺點。服務器端驗證方法結(jié)構(gòu)清晰，可以防止惡意攻擊，其主要問 題在于若輸入錯誤表單信息，需重傳整個頁面，同時若同 頁面有多個表單，回傳整個頁面可能會增加用戶等待的時 間。瀏覽器端及服務器端的雙重驗證響應速度快，其問題在 于代碼冗余。 基于 Ajax 技術的驗證方法也需要做兩次驗證： 首先是回饋驗證，無論表單數(shù)據(jù)準確與否，服務器均給出反 饋信息，其作用等同于雙重驗證中的瀏覽器端的驗證；表單處理前的驗證防止惡意修改，其作用等同于雙重驗證中的服 先構(gòu)建表單信息字段，交由 Ajax engine 發(fā)送給服務器端驗

11、 證，服務器將驗證結(jié)果發(fā)送給用戶，客戶端根據(jù)回饋信息， if (type = 'submit')&&(!( =判斷表單輸入是否正常，在 Ajax 技術下，對用戶而言，以務器端的驗證。其原理如圖 5 所示，旦有表單提交，首操作均在后臺運行，不會影響當前頁面各表單的狀態(tài)。若 是非法輸入，則回饋提示信息給用戶；若是正常輸入，客戶端將按照正常方法提交表單。為了防止惡意修改，表單處理之前還需驗證，此步驗證與之前驗證共用代碼。圖5. 基于Ajax 技術驗證原理圖有關 Ajax 技術的知識，可以參考developerWorks 上的 系

12、列文章。 Ajax 核心概念之一是XMLHttpRequest 對象，這是一個 JavaScript 對象，創(chuàng)建該 對象時，各種瀏覽器方法有所不同，具體實現(xiàn)可以參考 代碼?；仞侐炞C主要涉及兩個問題：首先是構(gòu)建驗證字段， 其次是回饋信息的格式。由于驗證字段和正常表單字段共用驗證代碼，驗證字段格式完全遵循表單提交時的格式。為某 的作用是區(qū)分兩種驗證。清單 4. 構(gòu)建驗證字段代碼 var postData = ""表單構(gòu)建驗證字段代碼如清單 4 所示。其中checkflag 字段var fields = form.elements;for (var i=0; i <

13、 fields.length; i+) if ( != "") type = fieldsi.type;if (type = 'radio') | (type = 'checkbox') if (!fieldsi.checked) continue; submitName) continue;if (postData) postData += "&" postData += + "=" + encodeURIComponent(field

14、si.value);postData += "&checkflag=1" 回饋信息主要在瀏覽 端的 Javascript 中處理，不同的格式需要不同的處理方法。在傳統(tǒng) Ajax 動態(tài)頁面處理中，回饋信息包含大量信息，采用 xml 格式，可以借助 DOM 技術處理，簡化程序。在本 足要求，客戶端的 Javascript 分析回饋信息，根據(jù)結(jié)果確定 是否提交完整的表單， 具體實現(xiàn)請參考源代碼。 基于 Ajax 技 術的驗證方法代碼相對比較復雜，錯誤的表單需要來回兩次 網(wǎng)絡交互，而正確的提交則需要三次網(wǎng)絡交互。該驗證方法 的響應時間與網(wǎng)絡繁忙程度有很大的關系。相對于純服務器 端驗證，該方法在驗證階段不需要重新下載整個頁面，在多 個表單共存在同一頁面的場合，基于 Ajax 技術的驗證方法 不會影響同一頁面