Board logo

標題: [教學] (教學第22篇)網頁與表單 下篇 [打印本頁]
作者: 小誌    時間: 2010-5-19 00:02     標題: (教學第22篇)網頁與表單 下篇

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

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

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行紅色原始碼區段）繼續將表單資料傳送或送交給後端處理程式的動作。
[attach]696[/attach]
  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>
複製代碼
作者: 小誌    時間: 2010-5-19 00:08

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

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

在上一節中我們只是檢驗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=”[email protected]”
複製代碼
若我們要尋找小老鼠「@」，就可以利用indexOf()方法：
  1. Mouse=yourmail.indexOf(“@”)
複製代碼
請問你：變數Mouse內的資料是什麼？是「@」，錯！！是「7」啦！indexOf()方法取回的是小老鼠「@」在「[email protected]」這個字串裡的字元位置，特別注意：字元位置的計算順序是從「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>
複製代碼
[attach]697[/attach]



歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)