回前頁

表單傳送的再確認：return 語法使用

請君留步
在 Internet 上，做為 Client 端的瀏覽器為了向 Web Server 傳送瀏覽者資料 ，多會使用表單元件 (FORM) 供瀏覽者輸入後，用 SUBMIT 標籤讓瀏覽者確定送出資料 。但我們不敢保證每個瀏覽者的輸入，都會依循我們預期的格式，所以在收到瀏覽者 資料並加以處理前，必須對資料加以查核，如果不符合就要請瀏覽者加以更正。 這種查核動作，可以由兩種方式來進行：
  1. 等資料送到 Server 端，再由 Server 端 CGI 加以查核，通過則登錄，不通過 則向 Client 端另傳一份錯誤通知，請瀏覽者更正重填資料。
  2. 在資料送出前，就利用瀏覽器的 Script 能力，先對傳送資料格式加以查核， 符合設定則傳送，不符合設定則不傳送，而直接在瀏覽器內通知使用者改正。
由前述可知，第二種處理方式因為直接由網頁的 Script 查核，不把錯誤的資料丟到 網路上，所以既減輕 Web Server 的負擔，減低網路流量要求，更可以立即的將結果 反應給輸入者，來增進效能，因此只要瀏覽器有 Script 能力，我們通常都會採用 Client 端的 Script 查核。在 HTML 中，只要瀏覽者按下 Submit 按鈕，資料就會 立即傳送，而 DHTML 則是請瀏覽器稍等一下，等查核完畢再傳送資料，所以我說是 請君留步。
HTML 區段的設定
Web Server CGI 動作，不是本雜記討論的範圍，所以我們就集中探討如何在 Client 端用 Script 查核使用者輸入資料之格式。想必大家早已知道當我們 Click Submit 按鈕後，瀏覽器就會送出表單資料，因此我們可以這樣安排 HTML： 
<FORM NAME="myform" METHOD="GET" ACTION="research.htm">
    <!-- 其他 form 欄位設定 // -->
    <INPUT TYPE=SUBMIT VALUE="登錄會員資料" onclick="return SendUserData(this.form);">
</FORM>
用意是當瀏覽者 Click Submit 按鈕後，不直接送出表單，轉而去執行我們自己設定的 SendUserData 查核函數。那為何在 SendUserData 前要加 return 敘述呢？那是因為 我們打算接收 SendUserData 函數傳回值，然後依此傳回值決定是否送出表單資料。
資料格式查核函數的設計
實際上 Submit 按鈕用 return 接收函數傳回值只有兩種狀況，一是傳回 true， 表單送出，一是傳回 false ，表單取消送出，因此 Script 函數的設計，就是依 我們的要求決定傳回 true or false。譬如本範例的 Script 函數是： 
function SendUserData(form1)
{
    /* sure 為準備傳回 submit 鈕的傳回值 */
    var sure=true;

    /* 先顯示一個確認框，請使用者確定是否要傳資料。 */
    sure=confirm("是否確定傳送資料");
    /* 如果使用者決定傳送資料，再進行資料格式查核。 */
    if (sure) {sure=CheckData(form1);}

    /* 回傳最後檢查結果 */
    return sure;
}

function CheckData(form1)
{
    var ret=true;
    /* 以下敘述是有一項資料不通過則傳回 false，取消表單傳送。 */
    if (ret) {if (form1.name.value=="") {alert("必須輸入您的大名");ret=false;}}
    if (ret) {if (form1.age.value=="") {alert("你忘了輸入年齡");ret=false;}}
    if (ret) {if (isNaN(form1.age.value)) {alert("年齡欄請輸入阿拉伯數字");ret=false;}}
    return ret;
}
好了，就這麼簡單，接著請您作範例測試吧。
範例測試
請輸入姓名：
請輸入年齡：
回前頁
1