第12章 表單及驗(yàn)證

1、表單與驗(yàn)證 通過(guò)HTML限制數(shù)據(jù) 通過(guò)JavaScript檢查數(shù)據(jù)格式 通過(guò)服務(wù)器端程序檢查數(shù)據(jù)的一致性 正則表達(dá)式1瑜珈網(wǎng)站的注冊(cè)頁(yè)面 Marcy為她的瑜珈網(wǎng)站增加了一個(gè)在線入會(huì)的功能，這樣一些潛在的客戶找到了合適的班級(jí)以后就可以立即注冊(cè)。 注冊(cè)頁(yè)面包括以下的信息：姓，名，email，出生日期，瑜珈經(jīng)驗(yàn)和自我介紹。 注冊(cè)頁(yè)面的第一個(gè)版本，表單用一個(gè)form來(lái)實(shí)現(xiàn)，所有的輸入域都是文本框，沒(méi)有使用任何JavaScript來(lái)對(duì)用戶的輸入進(jìn)行檢查。最后數(shù)據(jù)被登錄到數(shù)據(jù)庫(kù)中。2注冊(cè)頁(yè)面的問(wèn)題 使用文本框，且不對(duì)用戶輸入進(jìn)行校驗(yàn)的話，有可能出現(xiàn)以下的問(wèn)題： 同一個(gè)用戶注冊(cè)兩次 有些用戶沒(méi)有填寫(xiě)emai

2、l Email地址里填寫(xiě)的是網(wǎng)址（格式不正確） 出現(xiàn)沒(méi)有填寫(xiě)姓和名的用戶 每個(gè)人填寫(xiě)的出生日期格式都不一樣 出現(xiàn)練習(xí)瑜珈99年的客戶3需要進(jìn)行的驗(yàn)證 程序要進(jìn)行的驗(yàn)證主要由客戶來(lái)決定，瑜珈網(wǎng)站注冊(cè)頁(yè)面可能需要以下的驗(yàn)證：n名（必填，只能有字母）n姓（必填，只能有字母）nemail（必填，要有合法的email格式）n出生日期（非必填，具有類似MM-DD-YY格式）n瑜珈經(jīng)驗(yàn)（非必填，應(yīng)當(dāng)是一個(gè)數(shù)字）n自我介紹（非必填）4多步驟的驗(yàn)證 驗(yàn)證通常是一個(gè)包括多個(gè)步驟的過(guò)程。在Web頁(yè)面上可以使用某些控件發(fā)現(xiàn)一些問(wèn)題，如使用選擇框而不是文本框；可以利用客戶端JavaScript發(fā)現(xiàn)另外一些問(wèn)題，如Ema

3、il的格式。還有一些問(wèn)題可能需要由服務(wù)器完成驗(yàn)證，如查看一個(gè)用戶名是否已經(jīng)被占用； 原則：盡可能的在Web頁(yè)面限制數(shù)據(jù)，如果能通過(guò)表表單控件限制數(shù)據(jù)，就不要依賴于JavaScript；不要向服務(wù)器端發(fā)送格式不正確的數(shù)據(jù)。應(yīng)該讓服務(wù)器主要考慮業(yè)務(wù)邏輯，而不是格式化問(wèn)題；服務(wù)器應(yīng)當(dāng)把重點(diǎn)放在數(shù)據(jù)的正確性上，根據(jù)現(xiàn)有數(shù)據(jù)，新數(shù)據(jù)是否正確和一致。5約束XHTML進(jìn)行驗(yàn)證的第一步是修改注冊(cè)頁(yè)面的XHTML: 出生日期：不使用文本框，月份使用一個(gè)選擇框，列出12個(gè)可能的月份值；日期也使用選擇框，列出所有可能的日期值； 瑜珈經(jīng)驗(yàn)：不使用文本框，把已練瑜珈的時(shí)間劃分為一些區(qū)間（無(wú)，1年以內(nèi)，1-2年，3-5年

4、，5年以上），從而簡(jiǎn)化問(wèn)題； 提交按鈕：因?yàn)樾枰恍㎎avaScript驗(yàn)證，所以我們禁用它，防止表單過(guò)早提交。6在JavaScript中驗(yàn)證 簡(jiǎn)單的解決方案：建立一組事件處理程序，對(duì)應(yīng)頁(yè)面上的各個(gè)域分別有一個(gè)事件處理程序。但這意味著在多個(gè)不同的域上做相同的檢查，比如確保一個(gè)域中包含一個(gè)非空值。 DRY原則：軟件設(shè)計(jì)中的一個(gè)核心原則之一稱為DRY（不要自我重復(fù)：Dont Repeat Yourself）。換句話說(shuō)，一旦在某處編寫(xiě)了一段代碼，就要避免在另外某個(gè)地方編寫(xiě)同樣的這段代碼。 在驗(yàn)證的問(wèn)題上，不應(yīng)該在多個(gè)地方編寫(xiě)同樣的代碼來(lái)檢查一個(gè)域是否為空。7注冊(cè)事件處理程序 新建一個(gè)JavaScri

5、pt文件enroll.js，編寫(xiě)一個(gè)initPage函數(shù)，在其中為各個(gè)域的onblur事件注冊(cè)事件處理程序； 注意：我們使用了一個(gè)工具函數(shù)addEventHandler來(lái)注冊(cè)多個(gè)事件處理程序8檢查一個(gè)域是否為空 新建一個(gè)函數(shù)fieldIsFilled檢查輸入域是否為空： 這個(gè)函數(shù)適用于：姓，名，email warn和unwarn是后面定義的兩個(gè)函數(shù)，用于顯示警告消息和去除警告消息9檢查email格式是否正確 新建一個(gè)函數(shù)emailIsProper檢查email格式 這里我們用到了JavaScript正則表達(dá)式，于檢測(cè)一個(gè)字符串是否匹配某個(gè)模式。 這個(gè)函數(shù)只適用email域10檢查域是否只包含字

6、母 新建一個(gè)fieldIsLetters方法檢查域是否只包含字母： 這個(gè)函數(shù)適用于：姓，名11定義一個(gè)JSON對(duì)象 上一章中，服務(wù)器端程序用JSON來(lái)表示復(fù)雜的對(duì)象結(jié)構(gòu)。不過(guò)JSON并不只用于服務(wù)器端。只要需要表示名/值映射，JSON都是絕佳的解決方案。 我們定義一個(gè)warnings對(duì)象，對(duì)于于要完成的驗(yàn)證的各個(gè)域有一個(gè)頂級(jí)映射；對(duì)于各個(gè)域上可能發(fā)生的各種類型錯(cuò)誤有一個(gè)第二層映射；對(duì)應(yīng)各個(gè)域和該域的各個(gè)警告有一個(gè)特定的錯(cuò)誤消息。12顯示警告 新建一個(gè)warn函數(shù)，用于顯示警告。 它需要有兩個(gè)參數(shù)，傳入域和問(wèn)題的類型。 warn函數(shù)需要完成以下工作： 確定有問(wèn)題的域的父節(jié)點(diǎn)。 創(chuàng)建一個(gè)新的，并把它作為子節(jié)點(diǎn)增加到該域的父節(jié)點(diǎn)。 查找適當(dāng)?shù)木妫黾釉摼鏋樵氐奈谋?，這樣瀏覽器就會(huì)在表單上顯示這個(gè)警告。13顯示警告（實(shí)現(xiàn)） 注意：這里我們用到了eval，它用到了我們前面定義的JSON對(duì)象warnings14去除警告消息 新建一個(gè)unwarn函數(shù)，用于顯示警告。 它需要有兩個(gè)參數(shù)，傳入域和問(wèn)題的類型。 warn函數(shù)需要完成以下工作： 對(duì)于傳入的域，只需要查看是否存在一個(gè)警告。如果有，則將這個(gè)警告去掉。如果沒(méi)有警告，則不需要做任何工作。 需要確