在網際網路上,表單是和使用者互動的最常用方式。但使用者填入的資料可能不符合要求(例如將姓名欄位填成電子郵件、電子郵件不全、身份證字號或信用卡號碼有誤等),這些都可以在伺服器端的程式碼進行檢測,並將錯誤訊息回傳使用者。但這種方式不但增加了伺服器的負擔,也加重了網路資料的傳輸量。一個簡單的解決方案就是在客戶端以 JavaScript 來對表單的輸入進行驗證的工作,以確保表單數據在送至伺服器前都是正確無誤,這個檢核表單資料是否正確的過程,就稱為「表單資料驗證」(Form Data Validation),簡稱「表單驗證」(Form Validation)。
表單驗證可用 JavaScript 的各種字串與數值的函式來達成,並配合滑鼠事件,在適當的時機來提醒使用者可能發生的錯誤。以 JavaScript 在客戶端進行表單驗證的主要好處可摘要如下::
- 排除使用者無心的錯誤
- 減少伺服器的計算負載
- 減少網路上的資料傳輸量
但是,若僅僅使用客戶端的程式碼來進行表單驗證,只能排除無心的錯誤,對於有心要從事破壞工作的惡意使用者,表單驗證是無法做到滴水不漏的。換句話說,對於重要的資料,除了在用戶端進行表端驗證外,最好也在伺服器進行相關資料的檢查。
此外,Netscape 及 IE 在第四版後都支援 JavaScript 的「通用表示法」(Regular Expressions),這是一套功能非常強大的字串比對方法,這使得表單驗證的程式碼益形簡潔。有關通用表示法,會在本書後續章節有詳細的介紹。但本節的重點則是以簡潔的範例來說明表單驗證的概念,不會使用通用表示法,以便讓讀者能夠進入情況。
首先我們來看一個簡單的範例,此範例檢查使用者輸入的電子郵件,讀者可以自行輸入電子郵件帳號來試試看:
在上述範例中,我們檢驗電子郵件的規則很簡單,列舉如下:
- 必須包含「@」。
- 「@」之前不可為空字串。
- 「@」之後不可為空字串。
此範例的原始檔如下:
嚴格來說,這些驗證規則是過於簡單,當我們學到通用表示法時,就可以對電子郵件進行較複雜完整的驗證。
在下面的範例,我們對信用卡號碼進行驗證:
在上述範例中,我們假設信用卡卡號的格式是「xxxx-xxxx-xxxx-xxxx」,其中的每一個 x 都是代表一個數字,我們的驗證規則是:
- 字串長度必須是 19 (含三個減號)。
- 每四碼必須以減號分開。
- 每四碼為一個單位,都必須是整數。
上述範例的原始檔如下:
事實上上述驗證規則過於粗糙,真正的信用卡號碼還要符合一些內訂的編碼規則,詳見本書後續有關於「通用表示法」之章節的說明。
在下列的範例中,我們對各類表單控制項進行資料驗證,相關規則都可以由程式碼看出,請各位讀者親自試看看這個範例:
上述範例的原始檔如下:
JavaScript 程式設計與應用:用於網頁用戶端