如何運用表單驗證 Form Validation

網站實用程式

第五篇
如何運用表單驗證 Form Validation

壹、報導前言：
網頁表單 (Forms) 是 HTML 一個很特殊的標籤，客戶端與伺服器借助它進行溝通，以達到接收訪客資訊的目的。
我們常需要借助網頁表單向訪客取得某些資料，譬如：聯絡我們、用戶註冊、意見調查、問題反映、留言版等。
但在這個接收資料過程中，訪客往往會因為不小心打錯字或疏忽下漏填某個重要欄位，造成資料蒐整上的困擾。
訪客最容易犯的錯誤不外：漏填重要欄位、Email 格式填寫錯誤、輸入空白鍵、聯絡電話或身分證字號少一碼等。
因此用來防止粗心訪客漏填或誤填的網站表單驗證 (Form Validation) 工作，便成為網站開發者極為重要的課題了。
嚴格說表單驗證是預防工作，只能協助無心訪客的一時疏忽，卻無法做為遏阻有心人士的搗亂或蓄意破壞行為。
常見的表單查驗大都採用 JavaScript 的正規表示式 (Regular Expressions) 來作為驗證，當然還有其他不錯方式。
本篇報導將會有系統的逐一介紹相關的資訊給大家進一步學習，除此之外，也特別製作幾個實際範例分享給你套用。
如果你是初學者，建議你學習本報導之前，最好具備基本的 HTML 觀念及初步 CSS、JavaScript 等網頁程式基礎 Go 。
聲明：本報導資料來源取自網路，大部份屬完全免費性質，故不包含在本教材或線上教學片費用內，特此聲明。

貳、何謂表單驗證：
表單驗證的英文為 Form Validation，一般驗證形式主要針對兩個部份，一個是資料完整性驗證，另一個是資料正確性驗證。
表單驗證有伺服端（Client-Side 使用 CGI 腳本或 ASP 等）和客戶端（Server-Side 通常是使用 JavaScript）兩種主要方法。
伺服端驗證所需技術層次較高且麻煩，但比較安全；反之客戶端的驗證比較不安全，但容易且立即，可減輕 Server 端的負擔。
表單驗證可採用 JavaScript 的正規表示式 (Regular Expressions) 來驗證，也可使用 jQuery 外掛 jQuery.validate 表單驗證。
此外使用 JavaScript 的表單驗證，IE 與 Firefox 對 Radio 及 Select 的判別，在部份語法上，似乎存有瀏覽器不相容的問題。
注意：表單驗證 Form Validation 的目的是預防不慎的錯誤，而驗證碼 CAPTCHA 的目的是防止不正當的大量濫用，兩者有些不同。
學習表單驗證，最好具備基本的 HTML 語法功夫，你可以到網頁研習室 HTML 教學取得非常完整的教學資料或參與課程指導。
除此包括 CSS、JavaScript 等網頁程式基礎，你也可以參考我電子報相關報導，第一期、第二期、第三期、第四期電子報資料。

網頁研習室 HTML 教學及電子報報導： Go 。

參、認識正規表示法：
什麼是正規表示法？「正規表示法」或「正規式」的英文為 Regular Expressions ，也有人稱為「通用表示法」或「通用式」。
正規表示法提供了一種高級但不直覺的字符串匹配和處理的方法，利用正規表示法可以在資料中快速的找出關鍵或比對的資訊。
在網站程式中，正規表示法通常用來驗證或判斷用戶輸入的電話號碼、身分證字號、電子信箱、信用卡號碼等是否正確或有效。
不同的程式語言在正規化表示法上，格式稍不同，但功能大都一樣，如 JavaScript 、 Vbscript 及 Unix 指令均支持正規表示法。
用過的網友都知道，正規表示法的功能非常強大，但學起來並不是那麼容易，如：「^.+@.+..+$」這段難以理解的代碼表示甚麼？
如果你對此感到興趣，我已幫你蒐集一些 JavaScript 相關正規表示法報導文章，建議你有時間再慢慢學習也滿有意意思的。
如果你的專長不是資訊相關領域，也不用耽心這些看不懂字符，本報導已幫你整理許多完整實例及詳細解說，你只要照套即可。

更多詳細介紹 Go 。

肆、彼此如何運作：
在學習本報導前，你應該先初步瞭解網頁表單 (Forms) 有那些功能？表單與驗證 (Validation) 間彼此是如何運作的？
1.網頁表單內所有元件必需置於開始 <Form> 標籤與結束 </Form> 標籤內，此兩個標籤缺一不可且絕對不能省略。
2.表單可讓訪客在網頁上輸入文字 (Input) 及產生各種按鈕 (Button) 工具，以利填寫資料與執行傳遞資料等工作。
3.除此之外，還有文字框 (TextArea)、下拉式選項 (Select)、`圈鈕 (Radio)、選項 (CheckBox) ..等其其他元件。
4.網頁表單使用 Method="GET or POST" 及 Action="後端程式與路徑，將訪客所填入的資料，傳給伺服端進一步處理。
5.我們可運用 JavaScript 的函數 onSubmit 事件處理或 onClick 方法，在客戶端來執行表單驗證 (Form Validation)。
6.onSubmit 是 Form 的事件處理器，當瀏覽者按下送出表單後，就會執行 return checkform(this) 這個函數功能。
7.如果發現錯誤，checkform 函數就傳回 false，那就變成 onSumit="return false"，這樣就會終止瀏覽器送出表單。
8.如果沒有發現錯誤，就會傳回 true 值，瀏覽器便會送出表單內容給伺服端進一步處理，整個運作方式就這樣簡單。

更多詳細介紹 Go 。

伍、JS 驗證教學與範例：
使用 JavaScript 的表單驗證，IE 與 Firefox 對 Radio 及 Select 的判別要特別注意。
在部份語法上，會有瀏覽器不相容的問題，請分別使用 IE 與 Firefox 瀏覽器測試。
使用正規表示法 (Regular Express) ，便能製作出功能強大的各種表單驗證。

更多範例與詳細說明： Go 。

陸、jQuery 驗證教學與範例：
jQuery 是一套物件導向式簡潔輕量級的 JavaScript Library。
透過 jQuery 你可以用最精簡少量的程式碼來輕鬆達到跨瀏覽器 DOM 操作、事件處理、設計頁面元素動態效果、AJAX 互動等。
在輕鬆的使用 jQuery 之前，你必需先了解基本的 JavaScript、CSS 與 HTML Go 。
或直接套用 jQuery.validate 萬用表單驗證外掛元件，完全不用寫任何的程式，只要指定要驗證的欄位就可以了。

更多範例與詳細說明： Go 。

柒、中文化實做範例：
介紹三個不錯的 JavaScript 實做表單驗證範例給大家參考，這是我自國外蒐集範例中精挑代表，並已完成中文化實做範例。
Tigra Form Validator 網站，他提供一個免費的(Pro 版本除外)客戶端表單驗證 JavaScript 組件，功能強大且特殊。
Cool Javascript Validation 這個表單驗證程式就如所取名稱一樣，讓人覺得特別 Cool 。
Dynamic Inline Form Validation 是由 Web Development Blog 網站開發，特別免費釋出的 JavaScript 表單驗證程式。

我完成的中文化實做範例： Go 。

捌、簡單驗證碼範例：
雖然驗證碼 CAPTCHA 與表單驗證 Form Validation 的目的不同，在此也特別提供一個簡單 JavaScript 驗證碼範例給大家參考。
歡迎瞭解表單驗證碼 CAPTCHA 實際運作狀況，並請放心測試，本表單不會正式送出。

驗證碼範例與詳細說明： Go 。

玖、如何取得：

拾、結論與建議：