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

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

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

10.2客戶端表單驗(yàn)證

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

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