淺談 form 表單提交

　　原創文章，轉載請註明出處：http://www.cnblogs.com/weix-l/p/7675230.html

　　如有錯誤，請評論指出，謝謝！

　　Form 對象表明一個 HTML 表單。在 HTML 文檔中 <form> 每出現一次，就會有一個Form 對象被建立。

　　首先，看Form自身的事件句柄屬性。Form對象自己提供兩個JavaScript事件句柄屬性：onreset() 和 onsubmit()，前者可用於重置form表單中的數據，後者在試圖提交表單時調用。能夠給onsubmit屬性指定JavaScript語句或函數用於在提交時執行。好比，一個簡單的測試，使用input標籤在提交表單時彈出提示「表單提交...」，則爲：

<form action="/" onsubmit="alert('表單提交...')">
    <input type="submit" value="提交">
</form>

這條語句除了讓瀏覽器彈出一個提示框外沒有其餘做用，但它驗證了Form對象的onsubmit 句柄屬性。能夠給onsubmit屬性指定提交事件觸發時須要執行的函數，好比，登陸時指定一個名爲login的函數：

<form action="/" onsubmit="login();">
    <input type="submit" value="提交">
</form>

這樣，在點擊「提交」按鈕時會觸發「表單提交」事件，並執行login函數。一種一般的作法是給onsubmit句柄屬性中添加帶有return語句的JavaScript函數來判斷「表單提交」事件是否被執行，這是句柄屬性的特性，若是句柄的值爲false，則該句柄事件不會被執行，對onsubmit句柄來講，「若是 onsubmit 句柄返回 fasle，表單的元素就不會提交」。這樣，就能夠在login函數中指定在什麼狀況下函數返回true，即什麼狀況下才能提交表單：

<form action="/" onsubmit="return login();">
    <input type="submit" value="提交">
</form>

login函數的邏輯直接決定該表單是否會被提交。若是再擴充表單內容，在其中添加文本框和密碼框：

<form action="/" onsubmit="return login();">
    用戶名：<input type="text" id="uname">
    密碼：<input type="password" id="upass">
    <input type="submit" value="submit">
</form>

邏輯爲指定當用戶名或密碼有一個爲空的時候不能提交表單，則在login函數中能夠這樣寫：

<script>
    function login(){
        var uname = document.getElementById("uname").value;
        var upass = document.getElementById("upass").value;
        
        if(uname == "" || upass == ""){
            return false;
        } else {
            return true;
        }
    }
</script>

　　onsubmit句柄一個很大的做用就是能夠在初始刷新頁面或按下回車鍵的時候「阻止表單自動提交」，由於每次提交前都會去調用句柄去判斷，若是邏輯判斷返回false，則不會提交。

　　此外，Form對象還提供有submit()方法用於提交數據，可是，當submit()方法被執行時，Form的onsubmit事件句柄不會被調用。如何來驗證該方法呢？能夠經過其另外一個onclick句柄添加函數間接實現。好比，form元素的onsubmit句柄函數爲login_1()，類型爲button的input元素的onclick句柄函數爲login_2()，login_1()函數返回false,login_2函數中獲取form元素DOM，並調用其submit()方法。代碼以下，查看錶單是否會被提交：

<form action="/" onsubmit="return login_1();" id="login">
    <input type="button" value="submit" onclick="return login_2()">
</form>

<script>
    function login_1(){
        return true;
    }
    function login_2(){
        var frm = document.getElementById("login");
        frm.submit();
    }
</script>

結果顯示，form表單仍然會被提交，這說明form的onsubmit句柄沒有起做用，即login_1()函數沒有被調用。