JavaScript中form表單提交有哪幾種方式

JavaScript中form表單提交有以下三種方式：透過submit按鈕直接實作表單提交，透過button按鈕觸發onclick事件實作表單提交，submit按鈕觸發onsubmit事件實作表單提交

#在頁面中表單提交是一種很常見的方式，接下來在文章中為大家介紹幾種方法來實現表單提交，具有一定的參考價值，希望對大家有所幫助

【推薦課程：javascript教學】

##方法一

#透過使用submit按鈕來實現表單提交效果 

範例：

<form action="demo.asp" method="post">
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="提交">
</form>
<script>
/*这里是提交表单前的非空校验*/
    $("form").submit(function () {
        var first = $("input[name=&#39;firstname&#39;]").val();
        var last = $("input[name=&#39;lastname&#39;]").val();
        if (first == "" || first == null || first == undefined) {
            alert("first");
            return false;/*阻止表单提交*/
        } else if (last == "" || last == null || last == undefined) {
            alert("last");
            return false;/*阻止表单提交*/
        } else {
            alert("提交");
            return true;
        }
    })
</script>

如上述程式碼所示當我們點擊提交按鈕時，表單數據會被傳送到名為demo.asp的頁面。 submit按鈕實現的表單提交是直接提交。但是我們可以透過某些方法實現表單提交前需要進行驗證或是根據自己的自訂需求來做表單提交

方法二

##可以透過button按鈕來實現表單提交，當點擊button按鈕時，觸發onclick事件，由JavaScript裡函數判斷輸入內容是否為空，如果為空，返回false, 此時就不會發生表單提交。如果不為空，則將表單提交至由action指定的位址。

<script type="text/javascript">
         function check(form) {
              if(form.userId.value==&#39;&#39;) {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==&#39;&#39;){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                }
                  document.myform.submit();
            }
    </script>
<form action="demo.asp" name="myform" method="post">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
    <input type=button name="submit1" value="登陆" onclick="check(this.form)">  
</form>

注意：這個方法中由於button按鈕不具備自動提交的功能，所以由JavaScript語句來實現提交

方法三

透過使用submit按鈕實現表單提交。當我們點擊submit按鈕時，先觸發onsubmit事件，然後由JavaScript裡的函數來判斷輸入內容是否為空，如果輸入內容為空，則傳回false, 表單不提交。如果輸入內容不為空，則提交到由action指定的地址

<script type="text/javascript">
         function check(form) {
              if(form.userId.value==&#39;&#39;) {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==&#39;&#39;){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                }
                return true;
         }
</script>
<form action="demo.asp act=login" method="post" onsubmit="return check(this)">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
    <input type=submit name="submit1" value="登陆"> 
</form>

總結：以上就是本篇文章的全部內容，希望透過這篇文章可以幫助大家學會form表單提交的幾種方式。

以上是JavaScript中form表單提交有哪幾種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！