Web表單驗證在手術患者評價系統中的應用

沙 飛杜 菁劉文艷潘 清王 珂謝 艷田 新翟陽陽李 寧

Web表單驗證在手術患者評價系統中的應用

沙 飛①杜 菁①劉文艷①潘 清①王 珂①謝 艷①田 新①翟陽陽①李 寧①

目的：研究總結計算機應用程序中表單驗證技術的實現方法，以完善手術患者評價系統的設計與開發。方法：以臨床實際需求為基礎，以計算機網絡為平臺，應用不同的表單驗證技術設計開發基于LAMP運行環境的手術患者評價系統。結果：該系統通過表單驗證技術，對患者提交的評價數據進行篩選、過濾及糾偏，使得評價系統的運行更加安全、高效且具有很好的用戶體驗；使其實現了患者手術后可與手術團隊及時溝通并準確反饋術后感受的設計初衷。結論：表單驗證技術包括傳統后臺服務器端驗證和基于AJAX技術的綜合驗證，兩者無絕對的優劣，應當根據項目需求進行選擇。

異步JavaScript與XML；表單驗證；患者評價；PHP超文本預處理器；文檔對象模型

隨著信息技術的飛速發展，醫學領域進入了網絡信息化時代，豐富了醫生和患者的溝通方式。專業醫療咨詢網站應運而生，運行在各種網絡平臺上，極大提高了醫患之間溝通的效率。互聯網上的溝通過程是一個基于表單的信息提交和接受的過程[1-2]。為了使其順利進行，應用程序應當具備信息(數據)處理功能，來完成對所提交數據的有效性和安全性的驗證。本研究通過對手術患者評價系統部分功能設計實現過程的介紹，深入研究Web表單驗證技術的應用[3]。

1 系統結構設計概述

本系統開發測試操作系統為Windows 7，運行平臺是Windows Server*或Linux/Unix；程序腳本語言為PHP(版本：5.2.17)，后臺連接的數據庫為MySQL(版本：5.5.8)，服務器軟件是Apache(版本：2.2.14)。

系統用戶分為管理員、醫生和患者3類。管理員擁有系統完全權限，而醫生和患者分別具有相應的有限權限。這3類用戶在數據庫中分別對應3個表，即“admin”、“doctor”及“patient”，均以身份證號碼作為唯一標識，記錄用戶的相關信息[4]。由于本系統是對患者術后情況進行評價，以手術作為觸發線索，則數據庫中存在一個名為“operation”的表與其對應，記錄手術的相關信息。系統中的每個評價調查表在數據庫中分別對應1個表，目前為：“survey_ olfaction(嗅覺調查)”、“survey_snot20(鼻質量調查)”及“survey_vision(視覺調查)”。

2 表單驗證實現

表單驗證一直以來都是編程中使用最為頻繁的技術之一，幾乎被應用于任何網絡甚至單機交互程序中。表單驗證主要體現為傳統后臺服務器端驗證和基于AJAX技術的綜合驗證兩種形式[5]。Web 2.0時代以前，前者是主流的驗證技術[6]；而隨著網絡應用程序的復雜程度不斷增加，以及用戶對應用程序的使用體驗要求不斷提高，當今大中型專業或商業網站幾乎都采用后者作為主要表單驗證手段。本項目兩種驗證技術都有所體現，但以AJAX驗證為主。

2.1 傳統后臺服務器端驗證

傳統驗證方式正在逐漸被AJAX驗證技術取代，但并不意味著傳統驗證技術已經失去存在的意義。當今的互聯網似乎已經涵蓋了很多應用，傳統后臺服務器端驗證技術有其優勢，主要體現在速度快、穩定及開發維護成本低等方面，更適合功能相對單一的表單。本研究項目中用戶登錄退出頁面、問卷提交頁面都采用了后臺服務器端驗證的傳統技術。按照面向對象編程理論中的封裝原則，將登錄和退出行為封裝在logInOut類中[7]；不同的問卷統一建模成一個類——surveySubmit。本項目涉及的3個問卷分別被封裝成該類的3個方法。這里以其中一個問卷——“鼻生活質量調查”為例介紹設計過程。

任何方法進行表單驗證均需完成3個基本任務：①接收數據并進行必要的限制；②驗證數據的有效性，有效則提供給應用程序使用，無效則給出錯誤提示并要求重新提供有效數據；③當出現無效數據時，要求重新提供有效數據的同時，采用某種機制保留有效數據而無需用戶重復提供。

“鼻生活質量調查表”需要患者做出評價的項目有20個，每個項目對應6個可供選擇的級別。患者根據自己的實際情況對每個項目做出評價，每個項目均為必選。表單的最右側要求患者勾選影響其整體健康最重要的問題，至少兩項，最多五項。本例中使用單選框和復選框對用戶數據提交進行限制。由于復選框的最終選項個數具有不確定性，范圍是≥2且≤5。使用一個處理技巧—將復選框的ID用數組表示，這在HTML中是合法的[8]。解決了一個變量保存多個數量不確定值，并且這些值可在頁面間傳遞的問題。數據有效性驗證被封裝在surveySubmit類的submitSurveySnot20方法中。該方法首先檢查復選框的數據有效性，復選框都未被選中、選中項＜2個、選中項＞5個都將視為數據提交無效，并將錯誤標志變量$sign賦值為1。若復選框提交數據有效，即錯誤標志變量$sign未被賦值為1，則繼續驗證單選框。20個評價項目中任何一項對應的那行單選框組均未被選中則視為數據提交無效，并將錯誤標志變量賦值為1。若執行復選框和單選框驗證的代碼均未將錯誤標志變量賦值為1，則表單驗證通過，數據提交有效，應用程序將使用提交來的數據繼續執行。若驗證過程未通過，錯誤標志變量被賦值為1，則返回錯誤提示頁面要求用戶重新提交無效數據，而有效數據則通過Session變量得以保存，以便再次提交表單時自動被保留，為用戶減少了重復提交有效數據的麻煩，防止再次提交時丟失原本有效的數據而不能反映用戶的本意[9]。

所謂傳統后臺服務器端驗證完全通過服務器端腳本完成，而未借助客戶端技術進行輔助的驗證方式。其優點為程序設計簡單直觀，受外界平臺因素影響小；缺點是用戶體驗差，人機交互不夠連貫，服務器端負荷大。

2.2 基于AJAX技術的綜合驗證

當今的主流表單驗證技術是基于AJAX的，絕大多數商業或專業網站以及桌面程序都會不可避免地用到。AJAX并非一項全新的技術，字面顯示其為基于JavaScript和XML技術[10-11]。而最大的特點體現在“異步”概念上，是其優勢的體現以及被廣泛采用的原因。AJAX的核心是JavaScript對象XmlHttpRequest，是唯一的新技術，是一種支持異步請求的對象[12]。XmlHttpRequest可以使開發人員通過JavaScript向服務器提出請求并處理響應，而不阻塞用戶。XML與AJAX應用沒有必然聯系。當服務器將請求處理結果返回時，可以而非必須采用XML形式，任何形式的輸出均無問題。基于AJAX的驗證是以JavaScript技術作為基礎，結合后臺服務器端程序(本項目使用的是PHP)進行前臺(客戶端)輔助后臺(服務器端)的綜合驗證技術，本研究將以該評價系統中的用戶注冊程序為例，介紹基于AJAX技術的驗證方法。

本研究項目中的用戶注冊功能由數個核心程序文件實現，包括：register.php、validate.js、validate. php和validate.class.php。

(1)register.php以靜態內容為主，是注冊過程中唯一與用戶交互的頁面，整個表單都在該頁面中。每個表單元素都涉及“onblur="validate(this.value，this.id)”的JavaScript調用以及“value="”的PHP調用。validate(this.value，this.id)是在validate.js中聲明的，register.php通過“”標簽將validate.js包含在其中。該代碼表示：當表單元素失去焦點時，執行validate函數調用。“value="”的作用是：因提交無效數據而要求重新提交時，將同時提交的有效數據通過Session變量保存起來，避免用戶重新提交(如圖1所示)。

圖1 新用戶注冊頁面界面圖

(2)validate.js中封裝了注冊用戶所涉及的操作。當register.php頁面被調用時，validate.js也被裝載運行。首先通過“var xmlHttp=createXml HttpRequestObject();”來創建XmlHttpRequest對象。為了實現跨平臺性，必須要考慮到用戶可能使用不同瀏覽器，甚至即使同一瀏覽器也會有不同的版本。這些差異會影響XmlHttpRequest對象的創建和使用，所以代碼會根據各種情形分別實現。IE6及更早的版本中，XmlHttpRequest對象不能直接用“new XMLHttpRequest()”方法創建，而且每個版本之間也不同，因此代碼中聲明了一個數組變量XmlHttpVersions來保存不同版本的參數，如代碼1所示。

代碼1：不同版本瀏覽器對XmlHttpRequest對象的創建

}

當validate(inputValue,fieldID)以“onblur="validate(this.value,this.id)”在register.php被調用時，AJAX的異步特點就得以體現。“cache.push("inputValue="+inputValue +"&fieldID="+fieldID); ”表示將請求參數放入緩存數組cache中，相當于建立了一個請求隊列[13]。在XMLHttpRequest對象空閑時且請求隊列不為空時，通過“cacheEntry=cache.shift()”取出一組請求參數，為向服務器發送請求做準備。代碼“xmlHttp.open("POST", serverAddress, true)”用來規定發送請求的方式為POST，發送目標文件是serverAddress，發送方式為異步。代碼“xmlHttp. setRequestHeader("Content-Type", "application/ x-www-form-urlencoded")”規定了請求的格式。“xmlHttp.onreadystatechange=handleRe questStateChange”定義了當服務器端執行狀態改變時，客戶端進行相應處理時所使用的函數為handleRequestStateChange。準備工作完成后，最后通過“xmlHttp.send(cacheEntry)”向服務器發送請求。變量serverAddress被賦值為validate.php，則下面的流程將在服務器端的validate.php中執行。

(3)validate.php中包含了validate.class.php文件。后者是一個封裝了驗證對象所有屬性和方法的類，是服務器端代碼執行的基礎。validate. php中的代碼包含一個if-else語句，其通過變量validationType來判斷驗證類型——AJAX驗證或PHP驗證。兩者的區別在于：前者針對單獨表單元素，反饋提交了有效數據或無效數據的結果；后者針對整個表單，反饋表單是否包含提交了無效數據的表單元素。從validate(inputValue, fieldID)函數中向服務器發出的請求屬于AJAX驗證，其沒有validationType參數。因此，代碼執行進入else分支，輸出一個包含result和fieldid標簽的XML格式的響應給客戶端，由代碼“$validator->ValidateAJAX($_ POST['inputValue'], $_POST['fieldID'])”來完成。此時，validate(inputValue，fieldID)中進行監聽服務器端執行狀態變化的代碼“xmlHttp.onreadys tatechange=handleRequestStateChange”發揮了作用——調用函數handleRequestStateChange。

程序流程又回到validate.js中，執行handleRequestStateChange函數。“xmlHttp.readyState==4”表示服務器端響應完成。“xmlHttp.status==200”表示服務器端響應成功。若成功則調用函數readResponse()讀取響應的內容。

函數readResponse中，首先以文本形式獲得響應，檢查是否有錯誤返回或返回空白內容，并根據不同情況拋出錯誤，然后再以XML形式獲得響應，利用DOM[14]技術從響應中提取出result和fieldid標簽中的數據內容。如果result的值為0，則顯示ID為fieldID值的表單元素的錯誤提示；反之，如果result的值為1，則表示ID為fieldID值的表單元素中提交的數據有效，不顯示相應的錯誤提示，如代碼2所示。完成這個功能，需要在層疊樣式表[15]文件中分別設置有效數據顯示和無效數據顯示的樣式class。

至此，AJAX驗證過程已經完成，但基于AJAX技術的綜合驗證并未完成。表單域標簽里的屬性action被賦的值為“validate. php?validationType=php”。其表示整個表單提交時，代碼執行流程進入到前面提到的validate.php中if-else語句里的if分支，即執行“$validator->ValidatePHP()”調用。ValidatePHP方法的代碼很長，但思路并不復雜。首先復位$_ SESSION['errors']，清除上一次驗證中保留的錯誤。然后依次執行每個表單元素有效性驗證對應的方法，如果其中任何一項無效，則將錯誤標志變量$errorsExist賦值為1。之后檢查該標志變量，如果最終為0，則整個表單驗證通過，并將所有數據寫進數據庫；反之則通過foreach[16]語句將所有表單元素的提交值(不論有效無效)都保存到Session變量中，并返回“register.php”結果到validate.php。通過header函數將用戶重新引導到register.php中。至此，基于AJAX技術的綜合驗證的主要流程完畢。

3 討論

表單驗證在計算機軟件應用程序中使用廣泛，實現方法多樣。其在醫療系統上的應用也非常多見。本研究患者評價系統中還包括一些技術來輔助表單驗證，達到數據篩選和糾偏的目的，如“隨機訪問方式-隨機訪問時間”的因果翻轉二級菜單的實現。二級下拉菜單的顯示取決于一級單選按鈕的所選選項，使用了一種當前較流行的網頁布局標準，即DIV+CSS[17]。在對用戶提交數據進行限制，提高數據之間邏輯合理性的同時，用JavaScript腳本和DOM技術實現了布局塊翻轉效果，增加了用戶界面的交互性(如圖2所示)。

圖2 二級菜單顯示界面圖

4 結論

本研究項目在投入運行同時會根據臨床的需要不斷地對功能擴展完善，表單驗證技術也將會被頻繁地使用。技術有新與舊、簡與繁之分，但無絕對的優劣之分。表單驗證技術的選擇取決于項目的需要。如果在普通的硬件設備上開發一個開放度不高、訪問量不大、用戶也相對單一及以收集信息為主要目的臨床評價系統，無需采用AJAX綜合驗證技術。反之，開放度高、用戶類型、數量多、收集處理信息并且實時反饋給客戶端的大中型應用程序，則需要AJAX綜合驗證技術來實現。通常傳統后臺服務器端驗證與基于AJAX技術的綜合驗證會結合應用，如同本項目。

[1]Parsapoor A,Bagheri A,Larijani B.Patient's Rights Charter in IRAN.[J].Acta Med Iran,2014,52(1):24-8.

[2]Jon Duckett.Web編程入門經典--HTML、XHTML和CSS[M].杜靜,敖富江,譯.2版.北京:清華大學出版社,2010:123.

[3]Cristian Darie,Filip Chereches-Tosa,Bogdan Brinzarea,et al.AJAX與PHP Web開發[M].王德民,王新穎,劉昕,譯.北京:人民郵電出版社,2007:131-135.

[4]W.Jason Gilmore.PHP與MySQL5程序設計[M].朱濤江,譯.2版.北京:人民郵電出版社,2009:457-459.

[5]Cristian Darie,Filip Chereches-Tosa,Bogdan Brinzarea,et al.AJAX與PHP Web開發[M].王德民,王新穎,劉昕,譯.北京:人民郵電出版社,2007:7-10.

[6]費冬冬.JavaScript&Ajax應用開發[M].北京:機械工業出版社,2008:2.

[7]Walter Savitch.JAVA An Introduction to Computer Science and Programming[M].Second Edition US:Pearson Education,2002:252-258.

[8]劉麗霞.HTML&CSS常用標簽速查手冊[M].北京:化學工業出版社,2010:3-10.

[9]W.Jason Gilmore.PHP與MySQL5程序設計[M].朱濤江,譯.2版.北京:人民郵電出版社,2009:286-294.

[10]費冬冬.JavaScript&Ajax應用開發[M].北京:機械工業出版社,2008:9-17.

[11]Richard York.CSS入門經典[M].侯普秀,王一飛,譯.2版.北京:清華大學出版社,2008:445-448.

[12]Cristian Darie,Filip Chereches-Tosa,Bogdan Brinzarea,et al.AJAX與PHP Web開發[M].王德民,王新穎,劉昕,譯.北京:人民郵電出版社,2007:38-47.

[13]Cristian Darie,Filip Chereches-Tosa,Bogdan Brinzarea,et al.AJAX與PHP Web開發[M].王德民,王新穎,劉昕,譯.北京:人民郵電出版社,2007:134-135.

[14]Nicholas C,Zakas.JavaScript高級程序設計[M].曹力,張欣,譯.北京:人民郵電出版社,2006:138-145.

[15]Simon Collison.CSS基礎教程[M].劉志忠,譯.北京:人民郵電出版社,2007:3-8.

[16]Jason W.Gilmore PHP與MySQL5程序設計[M].朱濤江,譯.2版.北京:人民郵電出版社,2009:65-66.

[17]朱印宏.DIV+CSS網頁樣式與布局實錄[M].北京:兵器工業出版社,北京希望電子出版社,2012:293.

How the form-validating technique works in our patient-evaluating system/

SHA Fei, DU Jing, LIU Wen-yan, et al//
China Medical Equipment,2014,11(11):39-43.

Objective: To do the researching on how to use the technique of Form-Validating, in order to make the task of developing the Patient- Evaluating system more efficiently. Methods: According to requirements from hospitals, and using different ways of Form-Validating, we’ve developed a computer network based Patient-Evaluating system, which is developed and runs on LAMP. Results: By the technique of Form-Validating, this system can screen for valid data or correct invalid data. That makes the Patient- Evaluating system run safely, efficiently and userfriendly; that also makes patients and doctors communicate timely and exactly. Conclusion: The technique of Form-Validating contains traditional server-side mode and multiple ajax-based mode. Each has its features, which to choose depends on the need of the project.

Asynchronous javascript and XML; Form-validating; Patient-evaluating; PHP hypertext preprocessor; Document object model

1672-8270(2014)11-0039-05

R197.324

A

10.3969/J.ISSN.1672-8270.2014.11.014

沙飛,男,(1979- ),本科學歷，實驗師。首都醫科大學生物醫學工程學院計算機實驗室，從事計算機實驗室輔助教學和軟硬件維護開發工作。

2014-01-10

①首都醫科大學生物醫學工程學院計算機實驗室 北京 100069

[First-author’s address]School of Biomedical Engineering, Capital Medical University, Beijing 100069, China.