2019年5月16日 星期四

(21)網頁與表單 下篇

在網頁中設置表單的用意，不外乎是收集瀏覽者所給予的資訊，然後對這些瀏覽者所給予的資訊加以處理，而處理這些資訊的後端程式通常是CGI、ASP，當表單資料送交網頁的後端程式處理時，若有表單資料空白或內容錯誤，常常會導致後端程式執行錯誤，或許你會說：在後端程式中加入檢驗資料正確性的程式敘述來判斷不就行了！當然，這是一個方法，但你必須明白，所謂的後端程式是在伺服器(server)上執行，如果我們的網站很受歡迎，則頻寬流量將相當大，光是網頁的讀取就使伺服器(server)的負擔非常大，如果還要伺服器端負責檢驗表單資料的正確性，那伺服器的執行效率就更低了！

為了減少伺服器不必要的效能損失，我們可以利用JavaScript程式在客戶端(client)，也就是瀏覽者的瀏覽器中，進行表單內容正確性的驗證，而不需要將表單內容正確性的驗證工作交由伺服端來處理，避免造成伺服器的負擔。


onSubmit事件
在我們表單資料被傳送或送交伺服器端之前（get/post），我們可以利用『onSubmit』事件處理器來呼叫我們驗證表單資料內容的JavaScript函式。請注意：『onSubmit』事件處理器是專門為表單資料被傳送或送交伺服器端之前的確認動作而設計！

下列是表單網頁中的部分敘述，裡面有一個表單，該表單含有三個單行文字方塊元件及兩個按鈕元件：
  1. <form name="myform" method="POST" action="後端CGI處理程式" onSubmit="return test(this)">
  2. <table border="0" width="500" height="220">
  3. <tr>
  4. <td width="457">姓名：<input type="text" name="name" size="24"></td>
  5. </tr>
  6. <tr>
  7. <td width="457">E-Mail：<input type="text" name="email" size="23"></td>
  8. </tr>
  9. <tr>
  10. <td width="457">住址：<input type="text" name="address" size="56"></td>
  11. </tr>
  12. <tr>
  13. <td width="457">
  14. <input type="submit" value="送出" name="B1">
  15. <input type="reset" value="重填" name="B2">
  16. </td>
  17. </tr>
  18. </table>
  19. </form>
原始碼(第4、7、10行)為單行文字方塊元件；原始碼(第14、15行)為按鈕元件，「name」屬性皆有設定呦。

請注意看到原始碼(第1行)，我們是將onSubmit事件處理器放在表單標籤<FORM>之中，表單標籤<FORM>是唯一可以放置onSubmit事件處理器的地方，不管是以傳送或送交的方式(method=”get/post”)交付伺服器表單資料，當瀏覽者按下「submit（送出）」按鈕時，都將會觸發onSubmit事件處理器來呼叫「test()」JavaScript函式，這時候，表單內的資料將會先送交「test()」JavaScript函式，如果，「test()」JavaScript函式回值為「true」，表單資料才會傳送或送交給後端處理程式（action=”後端CGI處理程式”）；若「test()」JavaScript函式回值為「false」則表單資料的傳送或送交工作就會被終止！
在呼叫「test()」JavaScript函式時，我們使用了一個「this」關鍵字，意思是說：將表單內的資料傳遞給函式做處理！

下列為「test()」JavaScript函式的內容：
  1. <SCRIPT LANGUAGE="JavaScript">
  2. //驗證表單欄位內容是否填寫的函式
  3. function test(form)
  4. {
  5. //檢查姓名欄位是否填寫      
  6. if(document.myform.name.value=="")
  7. {
  8. alert('請填寫姓名,謝謝!')
  9. document.myform.name.focus()
  10. return false
  11. }

  13. //檢查電子郵件是否填寫
  14. else if (document.myform.email.value=="")
  15. {
  16. alert('請填寫E-Mail,謝謝!')
  17. document.myform.email.focus()
  18. return false
  19. }

  21. //檢查地址欄位是否填寫
  22. else if (document.myform.address.value=="")
  23. {
  24. alert('請填寫住址,謝謝!')
  25. document.myform.address.focus()
  26. return false
  27. }

  29. //欄位資料都有填寫則允許傳送表單資料
  30. return true
  31. }
  32. </SCRIPT>
表單內的資料送交「test()」JavaScript函式後，接著對表單內的資料進行驗證，以驗證「name(姓名)」單行文字方塊為例（第6至11行藍色原始碼區段）：利用if判斷敘述檢驗「name(姓名)」單行文字方塊的內容是否為空白，如果是空白，則利用alert()函是輸出一段錯誤訊息，並且，利用『focus』方法將操作焦點移至「name(姓名)」單行文字方塊，接著，函式回傳「false」終止將表單資料傳送或送交給後端處理程式的動作。

在檢驗完各個元件欄位的內容都不是空白後，則函式回傳「true」（第30行紅色原始碼區段）繼續將表單資料傳送或送交給後端處理程式的動作。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>表單驗證</TITLE>
  4. </HEAD>
  5. <SCRIPT LANGUAGE="JavaScript">
  6. //驗證表單欄位內容是否填寫的函式
  7. function test(form)
  8. {
  9. //檢查姓名欄位是否填寫      
  10. if(document.myform.name.value=="")
  11. {
  12. alert("請填寫姓名,謝謝!")
  13. document.myform.name.focus()
  14. return false
  15. }

  17. //檢查電子郵件是否填寫
  18. else if (document.myform.email.value=="")
  19. {
  20. alert("請填寫E-Mail,謝謝!")
  21. document.myform.email.focus()
  22. return false
  23. }

  25. //檢查地址欄位是否填寫
  26. else if (document.myform.address.value=="")
  27. {
  28. alert("請填寫住址,謝謝!")
  29. document.myform.address.focus()
  30. return false
  31. }

  33. //欄位資料都有填寫則允許傳送表單資料
  34. return true
  35. }
  36. </SCRIPT>

  38. <BODY bgcolor="#3399FF">
  39. <table border="1" width="600" bordercolorlight="#000080" bordercolor="#00FFFF" cellspacing="0">
  40. <tr>
  41. <td width="100%" bordercolorlight="#000000">
  42. <form name="myform" method="POST" action="後端CGI處理程式" onSubmit="return test(this)">
  43. <div align="center">
  44. <center>
  45. <table border="0" width="500" height="220" cellspacing="0" cellpadding="0" bgcolor="#004EC3">
  46. <tr>
  47. <td width="457"><font color="#FFFFFF">姓名：
  48. <input type="text" name="name" size="24"></font></td>
  49. </tr>
  50. <tr>
  51. <td width="457"><font color="#FFFFFF">E-Mail：
  52. <input type="text" name="email" size="23"></font></td>
  53. </tr>
  54. <tr>
  55. <td width="457"><font color="#FFFFFF">住址：
  56. <input type="text" name="address" size="56"></font></td>
  57. </tr>
  58. <tr>
  59. <td width="457">
  60. <input type="submit" value="送出" name="B1">
  61. <input type="reset" value="重填" name="B2"></td>
  62. </tr>
  63. </table>
  64. </center>
  65. </div>
  66. </form>
  67. </td> 
  68. </tr> 
  69. </table> 
  70. </BODY>
  71. </HTML>



伊妹兒驗證
伊妹兒（E-Mail）是目前網路族最佳的消息傳遞工具，E-Mail的好處就是經濟快速，但是E-Mail這個電子郵件信箱地址，就如同我們的郵件收件地址一般，萬一收件人地址寫錯了，信也就錯送到他人的手裡，相對的，你給錯了地址，人家依你給的地址回信，結果不是「查無此人」：信件被退回，就是被別人收走了！

電子郵件信箱的格式中，一定會含有一隻小老鼠「@」，而且最少還會有一個點「.（dot）」，例如，小誌的伊妹兒：charles@twbts.com，根據這兩個要項我們至少還可以檢驗伊妹兒的格式是否正確。

在上一節中我們只是檢驗E-Mail欄位內是否有資料存在，即使該欄位中瀏覽者有輸入資料，但這並不表所輸入的資料就是一個電子郵件信箱地址，所以我們可以採用如下的函式來進行E-Mail欄位的資料驗證判斷：
  1. function testEmail(yourmail)
  2. {
  3. if (yourmail.value.indexOf("@") == "-1" || 
  4.     yourmail.value.indexOf(".") == "-1" ||
  5.     yourmail.value == "")
  6. {
  7. return false
  8. }
  9. return true
  10. }
我們使用這個testEmail函式來驗證E-Mail電子郵件信箱地址是否正確時，當然得先傳遞一個E-Mail電子郵件信箱地址參數給函式的變數「yourmail」，然後再來檢驗變數是否含有小老鼠「@」與點「.（dot）」。

當testEmail函式自表單中接收到了一個E-Mail電子郵件信箱地址變數，如果變數內容不是沒有任何資料，而且含有小老鼠「@」與點「.（dot）」時，testEmail函式會回傳一個「true」值，否則，testEmail函式則會回傳一個「false」值。

insexOf()方法：
indexOf()方法是用來「搜尋」字元位置，假設我們的變數內有一個E-mail電子信箱地址：
  1. yourmail=”charle@twbts.com”
若我們要尋找小老鼠「@」，就可以利用indexOf()方法：
  1. Mouse=yourmail.indexOf(“@”)
請問你：變數Mouse內的資料是什麼？是「@」，錯！！是「7」啦！indexOf()方法取回的是小老鼠「@」在「charle@twbts.com」這個字串裡的字元位置，特別注意：字元位置的計算順序是從「0」開始，所以，小老鼠「@」在字串裡的字元位置是「7」，那如果找不到小老鼠「@」呢？那麼indexOf()方法的傳回值就是「-1」，也就是說：只要indexOf()方法字字串中找不到你所指定的字，則indexOf()方法的傳回值就是「-1」。這也就我們在testEmail函式中，為何要比較indexOf()方法的傳回值是不是「-1」的原因了！


實作學習：
驗證E-Mail電子郵件信箱地址是否正確。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>E-Mail驗證</TITLE>
  4. </HEAD>
  5. <SCRIPT LANGUAGE="JavaScript">
  6. //驗證E-Mail欄位內容的函式
  7. function test(form)
  8. {
  9. //檢查電子郵件是否含有小老鼠      
  10. if(document.myform.email.value.indexOf("@")=="-1")
  11. {
  12. alert("Email缺少小老鼠@")
  13. document.myform.email.focus()
  14. return false
  15. }

  17. //檢查電子郵件是否含有點
  18. else if (document.myform.email.value.indexOf(".")=="-1")
  19. {
  20. alert("Email格式錯誤!")
  21. document.myform.email.focus()
  22. return false
  23. }

  25. //檢查電子郵件是否填寫
  26. else if (document.myform.email.value=="")
  27. {
  28. alert("沒有填寫Email!")
  29. document.myform.email.focus()
  30. return false
  31. }

  33. return true
  34. }
  35. </SCRIPT>

  37. <BODY bgcolor="#3399FF">
  38. <form name="myform" method="POST" action="後端CGI處理程式" onSubmit="return test(this)">
  39. <div align="center">
  40. <center>
  41. <table border="0" cellspacing="0" cellpadding="0" bgcolor="#004EC3">
  42. <tr>
  43. <td width="457" height="70"><font color="#FFFFFF">E-Mail： 
  44. <input type="text" name="email" size="23"></font></td> 
  45. </tr> 
  46. <tr> 
  47. <td width="457" height="24"> 
  48. <input type="submit" value="驗證" name="B1"> 
  49. <input type="reset" value="重填" name="B2"></td> 
  50. </tr> 
  51. </table> 
  52. </center> 
  53. </div> 
  54. </form> 
  55. </BODY> 
  56. </HTML>









於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)
  • OpenOffice.org 自由學習趣：Part2Calc4_圖表
    版權宣告 【數位書香網站】之所有著作、視聽內容及資料以及網站畫面資料之安排，其著作權、專利權、商標、營業秘密及其他智慧財產權，均為【昱得資訊工作室】之合法權利人所有，除事先經【昱得資訊工作室】或其權利人之合法授權，任何人皆不得擅...
  • (17)網頁物件 上篇
    網頁物件：document，document物件我們之前已經用過了喔！還記得我們要將資料輸出到網頁上時，使用了write()方法，這個write()方法就是屬於document物件的！ 其實，document物件是指：顯示於瀏覽器視窗中的網頁文件，舉凡與網頁相關的設定項目，都是...
  • DW_PHP_AJAX_CH2 PHP語言入門_(2)變數、符號與陣列_陣列
    [陣列]   什麼叫陣列（Array）？陣列就是一個集合變數, 陣列就如變數一般, 可用來儲存資料, 一般的變數只能存放一筆資料, 而陣列則可以存放多筆資料, 簡言之, 陣列就一群資料型態相同的變數集合。 陣列是一群變數的集合, 不妨將陣列想像成一間旅館, 旅館內會有很多房...
  • DW_PHP_AJAX_CH3 表單的設計與規劃_(4)使用Spry元件驗證欄位_下
    [驗證Email格式] 希望使用者留下聯絡的電子信箱, 卻擔心使用者填寫了錯誤格式的郵件地址, 別擔心, 「Spry驗證文字欄位」也具由電子信箱、身分證字號…等具有特定格式的資料驗證功能。 1. 點選「信箱」文字欄位, 然後按下工具列【Spry】頁籤中的「Spry驗證文...
  • 版權宣告
    【數位書香網站】之所有著作、視聽內容及資料以及網站畫面資料之安排，其著作權、專利權、商標、營業秘密及其他智慧財產權，均為【昱得資訊工作室】之合法權利人所有，除事先經【昱得資訊工作室】或其權利人之合法授權，任何人皆不得擅自以任何形式複製、改作、編輯、散布、傳輸或其他目的加以使用，否...
  • (02)JavaScript算術運算與變數
    算數運算 在我們JavaScript中的算數運算可分為下列5種。 運算元        說明 +        加法，例如document.write(2+3)，網頁輸出答案5 -        減法，例如：document.write(3-2)，網頁輸出答案1 * ...
  • PowerPoint快速鍵
    若要這麼做 請按 從頭開始簡報 F5 從目前的投影片開始簡報 Shift+F5 顯示 簡報者檢視畫面 Alt+F5 或 Alt+S，B 在簡報中，以查看快速鍵的清單，請按下 F1。使用方向鍵在  說明投影片放映  對話方...