JavaScript語言與Ajax應(yīng)用（第二版）課件：JavaScript表單驗證

JavaScript語言與Ajax應(yīng)用（第二版）

JavaScript表單驗證10.1服務(wù)器端表單驗證

10.2客戶端表單驗證

10.3用Ajax實現(xiàn)表單驗證02十一月2024JavaScript語言與Ajax應(yīng)用（第二版）210.1服務(wù)器端表單驗證在Web應(yīng)用開發(fā)中，我們經(jīng)常要使用表單來收集用戶提交的數(shù)據(jù)，比如用戶注冊和成績單提交等場景。在通過表單收集用戶數(shù)據(jù)時往往必須驗證用戶提交的信息，以確保內(nèi)容是合理的，例如我們會在字段旁加上“*”表示必填項目。同時，為了保證用戶提交數(shù)據(jù)的正確性，那么就應(yīng)該通過程序迫使用戶填寫有效的數(shù)據(jù)。表單驗證的意義在于：讓程序檢查用戶的輸入，確保輸入的數(shù)據(jù)是正確的。02十一月2024JavaScript語言與Ajax應(yīng)用（第二版）310.1服務(wù)器端表單驗證服務(wù)器端數(shù)據(jù)驗證是指數(shù)據(jù)從瀏覽器發(fā)送到服務(wù)器之后通過服務(wù)器程序進行驗證。服務(wù)器端驗證是在數(shù)據(jù)提交到服務(wù)器后由服務(wù)器端代碼執(zhí)行的。

02十一月2024JavaScript語言與Ajax應(yīng)用（第二版）410.2客戶端表單驗證客戶端表單驗證可以通過JavaScript來實現(xiàn)。JavaScript原生的支持正則表達式，利用正則表達式可以高效準(zhǔn)的對用戶輸入的數(shù)據(jù)進行驗證。一般來說客戶端驗證需要考慮三個方面的問題，一是何時進行驗證，其次是驗證結(jié)果如何提示用戶，最后頁面需要根據(jù)不同的驗證結(jié)果作出不同的反應(yīng)。02十一月2024JavaScript語言與Ajax應(yīng)用（第二版）510.3用Ajax實現(xiàn)表單驗證客戶端利用JavaScript語言和正則表達式能夠?qū)崿F(xiàn)的驗證功能非常強大，但還是有不足之處。首先客戶端無法利用服務(wù)器中的數(shù)據(jù)來完成驗證，比如檢測某個輸入的身份證號是不是一個真實存在的。其次，某些情況下正則表達式也無法準(zhǔn)確的驗證數(shù)據(jù)，比如在上一節(jié)的例子中，檢查日期的正則表達式^\d\d\d\d[\/.-]\d\d[\/.-]\d\d$允許輸入的是四位數(shù)字、一個分隔符、兩位數(shù)字、一個分隔符和兩位數(shù)字。這條表達式可以有效地阻止一些明顯錯誤輸入，但對一些無效輸入，比如“9999/99/99”、“2011/03/32”、“2007/02/29”就無能為力了。正則表達式不可能完全捕捉各種畸形的狀況。還有很多情況是正則表達式完全起不到作用的：比如沒有規(guī)定格式的日期、數(shù)值范圍和URL是否有效。要驗證這些用戶輸入，需要服務(wù)器端驗證才行。02十一月2024JavaScript語言與Ajax應(yīng)用（第二版）610.3用Ajax實現(xiàn)表單驗證客戶端驗證用Ajax方式結(jié)合服務(wù)器端驗證可以按照如下步驟實現(xiàn)：（1）頁面加載的時候，給每個字段的onblur事件附加一個處理函數(shù)。（2）當(dāng)用戶的輸入焦點離開某個字段時，onblur事件處理函數(shù)開始執(zhí)行，從字段中取得當(dāng)前值，并在客戶端進行初步驗證。（3）如果初步驗證結(jié)果是輸入數(shù)據(jù)錯誤則顯示錯誤消息，在輸入的數(shù)據(jù)通過客戶端驗證之后，可以向服務(wù)器發(fā)出一個XMLHttpRequest調(diào)用，向服務(wù)器傳遞字段的名稱和取值。（4）服務(wù)期執(zhí)行相關(guān)驗證代碼，然后返回驗證結(jié)果。（5）JavaScript接收到Ajax調(diào)用結(jié)果，如果是錯誤消息就頁面上顯示錯誤信息，如果沒有錯誤頁面可以提交表單或執(zhí)行其他動作。02十一月2024JavaScript語言與Ajax應(yīng)用（第二版）7本章小結(jié)本章主要說明了如何利用JavaScript實現(xiàn)表單驗證，并且介紹了表單驗證的常用方式。表單驗證很重要。任何投入實用的表單頁面都應(yīng)該去盡力確保其收集到的數(shù)據(jù)的質(zhì)量?？蛻舳蓑炞C能應(yīng)對大多數(shù)情況，但有些時候數(shù)據(jù)驗證還是需要在服務(wù)器端進行