浅谈 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()函数没有被调用。