第12章 表單及驗證

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

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

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

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

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

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