JavaScript語(yǔ)言與Ajax應(yīng)用第10章 JavaScript表單驗(yàn)證.ppt

1、JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）,主編 董寧 陳丹 中國(guó)水利水電出版社,第10章 JavaScript表單驗(yàn)證,10.1 服務(wù)器端表單驗(yàn)證 10.2 客戶端表單驗(yàn)證 10.3 用Ajax實(shí)現(xiàn)表單驗(yàn)證,2020年8月5日星期三,JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）,2,10.1 服務(wù)器端表單驗(yàn)證,在Web應(yīng)用開(kāi)發(fā)中，我們經(jīng)常要使用表單來(lái)收集用戶提交的數(shù)據(jù)，比如用戶注冊(cè)和成績(jī)單提交等場(chǎng)景。 在通過(guò)表單收集用戶數(shù)據(jù)時(shí)往往必須驗(yàn)證用戶提交的信息，以確保內(nèi)容是合理的，例如我們會(huì)在字段旁加上“*”表示必填項(xiàng)目。 同時(shí)，為了保證用戶提交數(shù)據(jù)的正確性，那么就應(yīng)該通過(guò)程序迫使用戶填寫

2、有效的數(shù)據(jù)。表單驗(yàn)證的意義在于：讓程序檢查用戶的輸入，確保輸入的數(shù)據(jù)是正確的。,2020年8月5日星期三,JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）,3,10.1 服務(wù)器端表單驗(yàn)證,服務(wù)器端數(shù)據(jù)驗(yàn)證是指數(shù)據(jù)從瀏覽器發(fā)送到服務(wù)器之后通過(guò)服務(wù)器程序進(jìn)行驗(yàn)證。 服務(wù)器端驗(yàn)證是在數(shù)據(jù)提交到服務(wù)器后由服務(wù)器端代碼執(zhí)行的。,2020年8月5日星期三,JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）,4,10.2 客戶端表單驗(yàn)證,客戶端表單驗(yàn)證可以通過(guò)JavaScript來(lái)實(shí)現(xiàn)。 JavaScript原生的支持正則表達(dá)式，利用正則表達(dá)式可以高效準(zhǔn)的對(duì)用戶輸入的數(shù)據(jù)進(jìn)行驗(yàn)證。 一般來(lái)說(shuō)客戶端驗(yàn)證需要考慮

3、三個(gè)方面的問(wèn)題，一是何時(shí)進(jìn)行驗(yàn)證，其次是驗(yàn)證結(jié)果如何提示用戶，最后頁(yè)面需要根據(jù)不同的驗(yàn)證結(jié)果作出不同的反應(yīng)。,2020年8月5日星期三,JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）,5,10.3 用Ajax實(shí)現(xiàn)表單驗(yàn)證,客戶端利用JavaScript語(yǔ)言和正則表達(dá)式能夠?qū)崿F(xiàn)的驗(yàn)證功能非常強(qiáng)大，但還是有不足之處。 首先客戶端無(wú)法利用服務(wù)器中的數(shù)據(jù)來(lái)完成驗(yàn)證，比如檢測(cè)某個(gè)輸入的身份證號(hào)是不是一個(gè)真實(shí)存在的。 其次，某些情況下正則表達(dá)式也無(wú)法準(zhǔn)確的驗(yàn)證數(shù)據(jù)，比如在上一節(jié)的例子中，檢查日期的正則表達(dá)式dddd/.-dd/.-dd$允許輸入的是四位數(shù)字、一個(gè)分隔符、兩位數(shù)字、一個(gè)分隔符和兩位數(shù)字。這

4、條表達(dá)式可以有效地阻止一些明顯錯(cuò)誤輸入，但對(duì)一些無(wú)效輸入，比如“9999/99/99”、“2011/03/32”、“2007/02/29”就無(wú)能為力了。 正則表達(dá)式不可能完全捕捉各種畸形的狀況。還有很多情況是正則表達(dá)式完全起不到作用的：比如沒(méi)有規(guī)定格式的日期、數(shù)值范圍和URL是否有效。要驗(yàn)證這些用戶輸入，需要服務(wù)器端驗(yàn)證才行。,2020年8月5日星期三,JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）,6,10.3 用Ajax實(shí)現(xiàn)表單驗(yàn)證,客戶端驗(yàn)證用Ajax方式結(jié)合服務(wù)器端驗(yàn)證可以按照如下步驟實(shí)現(xiàn)： （1）頁(yè)面加載的時(shí)候，給每個(gè)字段的onblur事件附加一個(gè)處理函數(shù)。 （2）當(dāng)用戶的輸入焦點(diǎn)

5、離開(kāi)某個(gè)字段時(shí)，onblur事件處理函數(shù)開(kāi)始執(zhí)行，從字段中取得當(dāng)前值，并在客戶端進(jìn)行初步驗(yàn)證。 （3）如果初步驗(yàn)證結(jié)果是輸入數(shù)據(jù)錯(cuò)誤則顯示錯(cuò)誤消息，在輸入的數(shù)據(jù)通過(guò)客戶端驗(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ò)誤消息就頁(yè)面上顯示錯(cuò)誤信息，如果沒(méi)有錯(cuò)誤頁(yè)面可以提交表單或執(zhí)行其他動(dòng)作。,2020年8月5日星期三,JavaScript語(yǔ)言與Ajax應(yīng)用（第二版）,7,本章小結(jié),本章主要說(shuō)明了如何利用JavaScript實(shí)現(xiàn)表單驗(yàn)證，并且介紹了表單驗(yàn)證的常用方式。 表單驗(yàn)證很重要。任何投入實(shí)用的表單頁(yè)面都應(yīng)該去盡力確保其收集到的數(shù)據(jù)的質(zhì)量?？蛻舳蓑?yàn)證能應(yīng)對(duì)大多數(shù)情況，但有些時(shí)候數(shù)據(jù)驗(yàn)證還是需要在服務(wù)器端進(jìn)行。從