Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1695426
  • 博文数量: 607
  • 博客积分: 10031
  • 博客等级: 上将
  • 技术积分: 6633
  • 用 户 组: 普通用户
  • 注册时间: 2006-03-30 17:41
文章分类

全部博文(607)

文章存档

2011年(2)

2010年(15)

2009年(58)

2008年(172)

2007年(211)

2006年(149)

我的朋友

分类: 系统运维

2006-07-14 14:10:33

 

第 13 章 Form and validation

 作者: 伍新華 Email: ng-sun-wah@graduate.hku.hk


 

  請你參看本出版社 網頁中的 form, 這網頁的計算部份是用 JavaScript 寫成。

 

 

 Form object

 

1. Form 的用途

  Form 在文書處理器中一般譯作 "表單" 或 "填表", 在網頁中, form (表單) 有三個用途:

(1) 造出文字框或按鈕作為操作工具, 例如用按鈕來啟動 function 或 method。

(2) 設定一些可讓觀看者輸入資料的元件, 例如文字框、下拉式選項、圓鈕選項等等。

(3) 使用 submit 的功能將觀看者的選擇或填入的資料送回指定的地址。

 

  這一章主要是說 form 在上述的 (2) 及 (3) 的操作, 另會說到如何使用 JavaScript 來作 validation。

 

2. Validation

  Validation 中文可譯作驗証, 是檢查輸入的資料是否有錯, 例如觀看者輸入的電話號碼, 應該是 8 個位的數字, 若 validation 發現是 7 個位或以下的數字, 或是漏填, 在觀看者送出資料時, 就會告訴觀看者號碼錯誤, 但假若觀看者輸入 8 個位的錯誤電話號碼, validation 就驗不出來, 所以 validation 也有局限之處, 但起碼可以減少一部份錯誤。

 

Client-side 及 server-side validation:

  當觀看者在網路中看一個網頁時, 這網頁是從網頁的寄存地 (WWW server) 到達觀看者家中的個人電腦 (client), 若這網頁有 form 及 JavaScript的 validation, 當觀看者填入及送出資料, 這 JavaScript 就會在觀看者的個人電腦中進行 validation 的工作, 這就是 client-side validation。若這網頁內有 CGI 的程式指示, 也可不進行client-side validation, 觀看者的資料全部送出, 然後在 server 處進行 validation, 是為 server-side validation, 發現有錯就將資料送回 client 處要求觀看者修改。

  在設計 form 時, 我們應該盡量使用 client-side validation, 這反應較為快捷, 因為這是在 client 的電腦中進行, 而且可減輕 server 的負擔及來回輸送的時間。

 

3. form 的 event handlers

  form 只有兩個 event handlers: onSubmitonReset, 分別與 submitreset 兩類按鈕連結使用, 有關 submit 按鈕及 onSubmit, 請看隨後一節中的練習。

 

4. form 的 methods

  form 有兩個 methods: submit( ) reset( ) , 我們可以用這兩個 method 來代替 submitreset 按鈕, 請看 13.2-3 的一段。

 

 


 表單送回資料的方式

1. 以電郵方式接收資料

  我們在網頁中造出一個表單, 觀看者按 submit 的按鈕, 就會將資料送出。

  送出資料的方式有兩個選擇, 其中一個是將資料送去 WWW 伺服器中我們設定的一個程式, 然後由這程式將資料寫進一個記錄檔案中, 這方式要 ISP 容許我們使用一類名為 CGI (Common Gateway Interface) 的程式介面, 本書不會說及這方面的資料。

  另一個方式是使用電郵, 我們可以在 form 中設定 mailto (電郵) 的指示, 觀看者按 submit 的按鈕, form 中的資料就會以電子郵件的方式寄去 form 內指定的電郵地址。這方式的好處是不需要 WWW 伺服器的 CGI 程式 (很多 ISP 是不容許一般用戶使用這些程式), 而程式設計也較簡單。

 

2. 送出 (使用 submit 按鈕) 及收回 form 的練習

  你可在自己的電腦中造一個試驗的網頁, 在網頁中放下自己的電郵地址, 然後填入 form 中的資料, 按 submit 的按鈕, 看是否能將資料以電郵的方式送出, 稍後可連線, 將電子郵件下載回來, 看是否能看到剛才送出的資料。

練習-105 在表單中設定收件的電郵地址

  在這例子, 你看到一個簡單的 form, 在 form 中放下自己的電郵地址, 目的是當觀看者輸入資料後, 按 submit 的按鈕, 輸入的資料就會以電子郵件的方式送去你的郵箱。

1. 請你自行用「記事本」造出以下網頁, 在 mailto: 之後換上你的電郵地址

action="mailto:yourname@yourISP.com?subject=Testing submit"
  enctype="text/plain" >

Please fill in your name:
20 name="Visitor" >

Please fill in your telephone number:
20 name="Tel" >




2. 在上述設定, 留意這一句:

action="mailto:yourname@yourISP.com?subject=Testing submit"

  這句的 ? 是用來分隔兩個設定, subject= 後的文字會成為信件的標題, 這也可略去。

3. enctype="text/plain" 表示資料以純文字的方式送出, 不進行編碼, 若不設定這項, 收回的是編了碼的字元。(enctype 表示 encoding type。)

4. 請你在上述的網頁使用自己的電郵地址, 輸入完畢後, 將這檔案存檔, 例如使用 submit.htm 這名稱

5. 要試驗這 submit.htm 的操作, 標準方法是將這網頁送上 ISP 處自己的戶口中, 然後自己以觀看者的身份, 連線後在瀏覽器中輸入這網頁的 URL 來開啟這網頁, 在網頁中的文字框輸入資料, 例如:

圖 13-1 在網頁的文字框輸入了資料

  按 [Submit information] 的按鈕, 就會叫出瀏覽器的電郵功能及送出資料, 稍後你可檢查郵箱的信件, 看收回的有什麼資料。

6. 另一個較簡便的試驗方式是將 submit.htm 保留在自己的電腦中 (不送上 ISP 處), 若使用 IE, 開啟這瀏覽器後, 載入 submit.htm, 在網頁中的文字框輸入資料, 按 [Submit information], 會叫出 Outlook (或 Outlook express) 及出現以下提示:

圖 13-2 要你確定送出資料的對話盒

  按 [確定], 就會叫出 圖13-3 的撥號對話盒, 連線後, 資料就會以電郵的方式送出, 若在撥號對話盒中按 [取消], 就會取消這電郵。

  在隨後的練習, 你可按 [取消] 不送出電郵, 因來到這一步, 已能証實 submit 的機制操作正常。這些取消的郵件會變為待寄的郵件, 及放在 Outlook Express 的寄件匣內, 在這處你也可看到郵件的內容, 若你不刪去這些試驗郵件, 下次連線就會送出。

圖 13-3 撥號的對話盒

7. 若你使用 Netscape 來看這 submit.htm, 在文字框輸入資料後, 按 [Submit information], 就會有類似 圖13-2 的提示對話盒, 按 [確定], 就會叫出撥號對話盒, 連線後, 郵件就會送出。

  在隨後的練習, 你可在這撥號對話盒中按 [取消] 不送出電郵, 因來到這一步, 已能証實 submit 的機制操作正常。

8. 送出電郵後, 稍候一會, 就可檢查郵箱, 你應收到剛才送出的的信件。 筆者作試驗時, 輸入了 圖13-1 的資料, 用 Outlook Express 收回郵件, 就見以下資料:

圖 13-4 收回的郵件資料

  留意在原始檔案中 name="Visitor" name="Tel" 這兩項, 這兩個是文字框在操作上用的個別名稱, 在收回的資料中, 這兩個名稱用來作識別之用, 表示資料是來自該名稱的文字框。

9. 在這網頁, 請你試試 [Clear filled data] 這 reset 按鈕, 這是用來清除 (重置) 已輸入的資料。

 

3. submit( ) 及 reset( )

  在 2.3-G 的一節會說到 submitreset 兩個按鈕, 分別用來送出及重置輸入了的資料, form 另有 submit( ) reset( ) 這兩個 method, 也可作這方面的用途, 這兩個 methods 有以下語法:

document.formName.submit( )
document.
formName.reset( )

  但是 submit( ) 在 Netscape 中不能與 mailto: 使用, 在 IE 則可以, 例如以下的 script:

fm method=post
  action="mailto:
someone@somewhere.com" enctype="text/plain" >
20 name="Visitor" >


20 name="Tel" >




  在 IE, [送出] 及 [重置] 的按鈕都有效, 但在 Netscape, 只有 [重置] 的按鈕有效。

 

4. Return 鍵自動啟動的 submit

  若一個 form 內只有一個文字框, 當觀看者輸入資料後按 [Enter] 鍵, 就會自動啟動 submit 的功能, 將資料送出, 請看以下例子:


fm1 method=post action="mailto:null@nowhere.com"
  enctype="text/plain">
請輸入你的姓名:


fm2 method=post action="mailto:null@nowhere.com"
  enctype="text/plain">
請輸入你的電話號碼: 10>

  以上的網頁有兩個 form, 每個 form內有一個文字框, 觀看者在框內放下文字插入點, 輸入或不輸入文字, 按 [Enter] 鍵, 就會啟動送出資料的機制, 但一個 form 內有兩個文字框, 就不會有這情況出現。

 

 


 各類 元件

  在表單的操作, 有以下三組標籤可設定輸入的元件:

     來結束, 例如以下原始碼:


fm> 請輸入你的詳細地址:




  在瀏覽器有以下顯示:

  '; tpl += '

'; tpl += '
'; tpl += '
'; tpl += ''; tpl += '
'; tpl += '
'; tpl += '
'; $('.z_move_comment').html(''); $(this).parents('.Blog_right1_8').find('.z_move_comment').html(tpl).show(); }); //引用的评论提交 $('#quota_sbumit').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var bid = $(this).attr('bid'); var tid = $(this).attr('tid');//被引用人的id var qid = $(this).attr('cid');//引用的id var url = $(this).attr('url'); var text = $('#rmsg').val(); var tname = $(this).attr('tname'); if(text == '' || text=='文明上网,理性发言...') { showErrorMsg('评论内容不能为空!' , '消息提示'); return false; } else { if(mb_strlen(text) > 1000){ showErrorMsg('评论内容不能超过500个汉字' , '消息提示'); return false; } } $.ajax({ type: "post", url: url , data: {'bid': bid , 'to' : tid , 'qid' : qid , 'text': text , 'tname' : tname }, dataType: 'json', success: function(data){ if(data.code == 1){ var tpl = '
'; tpl+= ''; tpl+= '
'; tpl+= '

' + data.info.username + '' + data.info.dateline + '

'; tpl+= '

' + data.info.quota.username + ':'+ data.info.quota.content + '

'; tpl+= '

' + data.info.content + '

回复 |  删除 |  举报
'; tpl+= ''; tpl+= '
'; $('#replyList .Blog_right1_8:first').before(tpl); $('.z_move_comment').html('').hide(); } else if(data.code == -1){ //showErrorMsg(data.info , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); } }, error: function(){//请求出错处理 } }); }); //底部发表评论 $('#submitmsg').click(function(){ if(allowComment == 1) { showErrorMsg('该博文不允许评论' , '消息提示'); return false; } var bid = $(this).attr('bid'); var toid = $(this).attr('toid'); var text = $('#reply').val(); var url = $(this).attr('url'); if(text == '' || text=='文明上网,理性发言...') { showErrorMsg('评论内容不能为空!' , '消息提示'); return false; } else { if(mb_strlen(text) > 1000){ showErrorMsg('评论内容不能超过500个汉字' , '消息提示'); return false; } } $.ajax({ type: "post", url: url , data: {'bid': bid , 'to' : toid ,'text': text}, dataType: 'json', success: function(data){ if(data.code == 1) { var tpl = '
'; tpl += ''; tpl += '
'; tpl += '

' + data.info.username + '' + data.info.dateline + '

'; tpl += '

' + data.info.content + '

'; tpl += '
回复 |  删除 |  举报
'; tpl += ''; tpl += '
'; $('.Blog_tit3:first').after(tpl); $('#reply').val('文明上网,理性发言...'); } else if(data.code == -1) { showErrorMsg(data.info , '消息提示'); } }, error: function(){//请求出错处理 } }); }); //底部评论重置 $('#reset_comment').click(function(){ $('#reply').val('文明上网,理性发言...'); }); //取消回复 $('#qx_comment').live('click' , function(){ $('.z_move_comment').html('').hide(); }); $('#rmsg, #reply').live({ focus:function(){ if($(this).val() == '文明上网,理性发言...'){ $(this).val(''); } }, blur:function(){ if($(this).val() == ''){ $(this).val('文明上网,理性发言...'); } } }); //删除留言确认 $('.comment_del_mark').live('click' , function(){ var url = $(this).attr('url'); asyncbox.confirm('删除留言','确认', function(action){ if(action == 'ok') { location.href = url; } }); }); //删除时间确认 $('.del_article_id').click(function(){ var delurl = $(this).attr('delurl'); asyncbox.confirm('删除文章','确认', function(action){ if(action == 'ok') { location.href = delurl; } }); }); /* //字数限制 $('#rmsg, #reply').live('keyup', function(){ var id = $(this).attr('id'); var left = Util.calWbText($(this).val(), 500); var eid = '#errmsg'; if(id == 'reply') eid = '#rerrmsg'; if (left >= 0) $(eid).html('您还可以输入' + left + '字'); else $(eid).html('您已超出' + Math.abs(left) + ''); }); */ //加载表情 $('#face').qqFace({id : 'facebox1', assign : 'reply', path : '/image/qqface/'}); $('#mface').qqFace({id : 'facebox', assign : 'rmsg', path:'/image/qqface/'}); /* $('#class_one_id').change(function(){ alert(123213); var id = parseInt($(this).val() , 10); if(id == 0) return false; $('.hidden_son_class span').each(function( index , dom ){ if( dom.attr('cid') == id ) { } }); }); */ //转载文章 var turn_url = "/blog/viewClassPart.html"; $('#repost_bar').click(function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var id = $(this).attr('bid'); asyncbox.open({ id : 'turn_class_thickbox', url : turn_url, title : '转载文章', width : 330, height : 131, scroll : 'no', data : { 'id' : id }, callback : function(action){ if(action == 'close'){ $.cover(false); } } }); }); /* //转发文章 $('#repost_bar').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var bid = $(this).attr('bid'); var url = $(this).attr('url'); asyncbox.confirm('转载文章','确认', function(action){ if(action == 'ok'){ $.ajax({ type:"POST", url:url, data: { 'bid' : bid }, dataType: 'json', success:function(msg){ if(msg.error == 0){ showSucceedMsg('转发成功!', '消息提示'); }else if(msg.error == 1){ //location.href = '/index.php?r=site/login'; showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); }else{ showErrorMsg(msg.error_content, '消息提示'); } } }); } }); }); */ });