關於本報

網頁研習室【網頁製作系列報導】
報主:李文能
創刊日期:2002-06-25
發報頻率:月刊
訂閱人數:6,166
官網:
http://www.webpage.idv.tw/maillist/

近期電子報


訂閱便利貼


將貼紙語法置入您的網站或部落格當中, 訪客可以輸入mail取得認證信,並按下確認連結後, 快速訂閱您的報紙。
預覽圖
訂閱網頁研習室【網頁製作系列報導】報
網頁研習室【網頁製作系列報導】
-----------------------------------------------------------------------------------------------------
Plurk FaceBook Twitter 收進你的MyShare個人書籤 MyShare
  顯示內嵌語法

網頁研習室【網頁製作系列報導】
發報時間: 2012-02-24 16:00:00 / 報主:李文能
[公益聯播]『愛分享實物銀行』─ 弱勢家庭物資轉贈計畫
本期目錄
壹、報導前言:
貳、何謂表單驗證:
參、認識正規表示法:
肆、彼此如何運作:
伍、JS 驗證教學與範例:
陸、jQuery 驗證教學與範例:
柒、中文化實做範例:
捌、簡單驗證碼範例:
玖、如何完整取得所有資料:
拾、結論與建議:
壹、報導前言:
網頁表單 (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

玖、如何完整取得所有資料:
關於本篇更多詳細教學說明與運用技巧,教材或教學會員請打開 pro/05/text/ 自行參考。
如果您想完整取得電子報內所有檔案資料,我們提供燒錄光碟片給您 Go
凡加入教學會員者,可獲得半年期線上指導及所有報導完整的資料光碟乙片。
詳細內容:語法教學第一電子報第二電子報第三期電子報第四期電子報網頁圖窟
您需要這份完整報導資料嗎?學習上有困難嗎?您想永久長期取得網頁研習室有關網頁製作教材嗎?
如果你只是想取得部份完整範例檔案,建議採用以新台幣 100 元贊助本站方式,即可取得進入會員區資格 Go
為讓您學習不終斷,即日起凡參加教材、教學會員或贊助本站會員者,均可享有永久後續報導資料免費下載服務 Go
特別聲明:本站教學使用軟體或檔案,著作權與版權均屬原創公司所有,大多屬完全免費性質,不含於教學(材)費用內。
拾、結論與建議:
本站所有報導資料,歡迎網友加入鏈結或轉載內容,惟請保留文章完整,並註明此 引用來源 ,謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿,絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ,她真的簡單易學,懂了她您就能駕馭她,讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質, 索取教材資料 屬個人自由意願,而回饋給您的光碟片,則是我們的誠意而已
一篇保證前所未見的 HTML 教學課程,絕對是您學習 HTML 的好教材,強烈建議您進入實際體驗一下。
本電子報報導資料,未來將繼續每隔 30 日發表一次,以嘉惠更多想學會 HTML 網友,歡迎 繼續訂閱
本報導內容或資料,因限人力、時間,非教學會員,不接受任何疑惑解答,敬請見諒。
推薦訂閱
介紹一個免費資訊與網路新知網站@【網頁研習室【網頁製作系列報導】】
【ACTION! 走讀社區開麥拉】 屏東社區深度旅遊體驗暨短片徵選活動開鑼了!@【藍色東港溪保育協會網路通訊】
轉寄『如何運用表單驗證 Form Validation』這期電子報

寄信人暱稱  寄信人email
收信人暱稱  收信人email

  • 社群留言
  • 留言報主