asp.net接受表單驗證格式後再送出資料_前端專題：Form表單詳解

在html中，通常把form标簽稱為表單

表單不會對頁面樣式産生任何影響，但它會影響頁面的行為

它可以将表單中的資料，使用指定的請求方式（get或post），送出到指定的伺服器位址

這裡将涉及到form标簽的4個重要内容：

送出時機
請求方式
請求位址
發送的資料

本文将按照上面的順序詳細講解form表單每個層面的工作機制

送出時機

什麼是表單送出？簡單的說，就是将表單中的資料發送給伺服器。詳細的說，就是将form标簽之間，使用者填寫的資料封裝到消息體或url位址後，然後請求伺服器。

而送出時機，就是指form表單什麼時候送出。

通常，下面兩種情況，都會導緻form表單送出：

點選了表單中的送出按鈕
在js中調用了表單對象的submit方法

接下來，我将分别詳細講解兩種送出方式

送出按鈕

當使用者點選送出按鈕的時候，會導緻表單被送出！

但千萬不要錯誤的認為送出按鈕就是按鈕文本是“送出”的按鈕。

下面這個按鈕并不是送出按鈕：

<input type="button" value="送出" >

送出按鈕跟按鈕的文本無關，它是指

type="submit"

的按鈕。另外，

type="image"

的

input

标簽，也可以實作送出，也可以當做是送出按鈕。

下面的表單中出現的按鈕都是送出按鈕：

<html ><head>
    <title>document</title></head><body><form>
    <p>賬号：<input type="text" name="loginid"></p>
    <p>密碼：<input type="password" name="loginpwd"></p>
    <!--下面的按鈕都是送出按鈕-->
    <p><input type="submit" value="送出1"></p>
    <p><button type="submit">送出2</button></p>
    <p><input type="image" src="http://i.imgur.com/d6lbol2.png"></p></form></body></html>

運作出來的效果：

asp.net接受表單驗證格式後再送出資料_前端專題：Form表單詳解

不管你使用哪種送出按鈕，使用的時候要特别注意以下幾點：

送出按鈕必須放置在表單裡面
點選送出按鈕時，隻會送出它所在的表單

下面的代碼說明了這一問題：

......<form id="f1">
    .......    <!-- 點選該送出按鈕隻會送出id為f1的表單 -->
    <button type="submit">送出</button></form>......<!-- 點選該送出按鈕沒有任何意義，不會送出任何表單 --><button type="submit">送出</button>......<form id="f2">
    .......    <!-- 點選該送出按鈕隻會送出id為f2的表單 -->
    <button type="submit">送出</button></form>.....

說到這裡，順便說一句，一個頁面可以出現多個form表單，但不允許在一個form表單裡面出現另一個form表單，切記！

js送出

不通過送出按鈕，使用js也可以送出form表單

具體的方式是：

擷取form表單dom對象
調動dom對象的submit函數

下面的代碼實作了js送出form表單的功能：

<html ><head>
    <title>document</title></head><body><form id="f1">
    <p>賬号：<input type="text" name="loginid"></p>
    <p>密碼：<input type="password" name="loginpwd"></p>
    <!--下面是一個普通按鈕-->
    <p><button onclick="jssubmit()">送出</button></p></form><script type="text/javascript">
    function jssubmit() {        //擷取form表單的dom對象
        var formdom = document.getElementById('f1');        //調用對象的submit方法
        formdom.submit();
    }</script></body></html>

運作出來的效果如下：

asp.net接受表單驗證格式後再送出資料_前端專題：Form表單詳解

表單送出事件

無論你使用送出按鈕，還是使用js送出，在form表單被送出時，會首先觸發form表單的onsubmit事件

如果你給form标簽注冊了onsubmit事件，若事件執行過程中傳回了false，可以阻止表單的送出，如果沒有傳回false，則表單正常送出

我們往往利用這一點，來實作在送出前的驗證

下面的代碼使用JS對form表單的内容進行了驗證，若驗證沒有通過，則阻止form表單送出：

<html ><head>
    <title>document</title></head><body><form id="f1" onsubmit="return vali()">
    <p>賬号：<input type="text" name="loginid"></p>
    <p>密碼：<input type="password" name="loginpwd"></p>
    <p><button type="submit">送出</button></p></form><script type="text/javascript">
    function vali() {        //擷取賬号文本框
        var txtLoginId = document.getElementsByName("loginid")[0];        //擷取密碼文本框
        var txtLoginPwd = document.getElementsByName("loginpwd")[0];        if(txtLoginId.value == ""){
            alert("請填寫賬号");            return false;//傳回false，阻止表單送出
        }        if(txtLoginPwd.value == ""){
            alert("請填寫密碼");            return false;//傳回false，阻止表單送出
        }
    }</script></body></html>

這樣一來，如果使用者沒有填寫賬号或密碼，則會彈出提示，并且，表單送出的請求會被阻止，避免錯誤的内容發送到伺服器。

要特别注意的是

onsubmit="return vali()"

，這裡必須使用return，否則無法将函數的傳回結果傳遞給頁面，就無法達到阻止頁面送出的效果。

請求方式

了解了form表單的送出時機，再來看它的請求方式

所謂請求方式，就是送出時将使用什麼類型的請求（get、post）發送給伺服器

使用form标簽的method屬性，可以控制form表單的送出方式，該屬性可以省略，若省略，預設的送出方式是get

當使用get方式送出表單時，浏覽器會将表單中的資料添加到位址後面，作為位址參數

下面的form表單使用了get的方式送出請求：

<form action="/server.php" method="get">
    <p>賬号：<input type="text" name="loginid"></p>
    <p>密碼：<input type="password" name="loginpwd"></p>
    <p><button type="submit">送出</button></p></form>

當送出表單時，向伺服器發送以下資訊：

請求位址：/server.php?loginid=賬号文本框内容&loginpwd=密碼文本框内容

請求體：無

反之，如果使用post的方式送出請求：

<form action="/server.php" method="post">
    <p>賬号：<input type="text" name="loginid"></p>
    <p>密碼：<input type="password" name="loginpwd"></p>
    <p><button type="submit">送出</button></p></form>

當送出表單時，則向伺服器發送以下資訊：

請求位址：/server.php

請求體：loginid=賬号文本框内容&loginpwd=密碼文本框内容

請求位址

表單中的請求位址是指，當送出form表單時，會将表單中的資料送出到服務的哪個位址去處理，就好比你去政府辦事，你要把你的資料送出給哪個部門來處理

你可以使用form标簽的

action

屬性來設定其送出位址，該屬性如果被省略，則預設為目前頁面位址

<!-- 當送出表單時，會将表單内容發送給/server.php這個位址處理 --><form action="/server.php" method="post">
    <p>賬号：<input type="text" name="loginid"></p>
    <p>密碼：<input type="password" name="loginpwd"></p>
    <p><button type="submit">送出</button></p></form>

發送的資料

當表單被送出時，表單中的内容并不是全部都會送出，表單中的某個标簽的資料，如果想要被送出到伺服器，必須滿足以下兩個條件，缺一不可：

标簽必須具有name屬性值，沒有name屬性值的标簽就無法組裝鍵值對，它的值不會被送出
必須是input、select、textarea标簽，其他标簽的資料不會送出到伺服器

在送出這些标簽的資料時，鍵值對分别如下：

鍵：标簽的name屬性值
值：标簽的value屬性值

下面，我将分為幾種情況，來講解具體資料送出内容

文本框

<form method="post" action="test.php"> <p name="p">這裡的内容會送出嗎？</p> <p><input type="hidden" name="hide" value="data"></p> <p>賬号：<input type="text" name="loginid"></p> <p>密碼：<input type="password" name="loginpwd"></p> <p>簡介：<textarea name="description"></textarea></p> <p><input type="submit" name="btn" value="送出"></p></form>

在上面的代碼中，所有的input标簽和textarea标簽都有name屬性值，送出時，這些标簽的value屬性值都會被送出到伺服器。

但是，第一個p标簽雖然也有name屬性值，但它的資料不會送出到伺服器

如果我在頁面中寫入以下資料，然後點選送出：

asp.net接受表單驗證格式後再送出資料_前端專題：Form表單詳解

則向伺服器發送的消息體中，鍵值對資料如下：

鍵值hidedataloginidabcloginpwd123descriptionsadfasdfsafbtn送出消息體的原始格式如下：

hide=data&loginid=abc&loginpwd=123&description=sadfasdfsaf&btn=送出

下拉清單

當送出表單時，表單中的下拉清單選中項的value值會被送出到伺服器

若選中下面的城市，然後送出：

asp.net接受表單驗證格式後再送出資料_前端專題：Form表單詳解

則向伺服器發送的消息體為：

city=cd

特别注意，發送到伺服器的是選中項的value值(cd)，而不是内文本(成都)

單選框

當送出表單時，隻有被選中的單選框的value值才會被送出到伺服器

使用者選擇以下内容然後送出：

asp.net接受表單驗證格式後再送出資料_前端專題：Form表單詳解

則向伺服器發送的消息體為：

sex=male&xueli=benke

特别注意，發送到伺服器的是選中項的value值(male 和 benke)，而不是後面的文本(男和大學)

多選框

和單選框一樣，隻有被選中的多選框的value值才會發送到伺服器

若使用者選中以下内容，然後送出：

asp.net接受表單驗證格式後再送出資料_前端專題：Form表單詳解

則向伺服器發送的消息體為：

like=football&like=music&like=read

仔細看上面發送的内容，你會發現出現了重複的鍵，http協定允許在請求時出現重複的鍵，無論是用哪種語言作為服務端，也都可以處理請求資料中的重複鍵，完全不必擔心。

特别注意，發送到伺服器的是選中項的value值，而不是後面的文本

以上，就是form表單的全部内容，這些知識，基本涵蓋了絕大部分送出表單需要用到的功能

是以，結尾，撒花

asp.net接受表單驗證格式後再送出資料_前端專題：Form表單詳解

送出時機

送出按鈕

js送出

表單送出事件

請求方式

請求位址

發送的資料

繼續閱讀

JS動态模拟Form表單送出資料

前端Form表單送出中文亂碼問題

手機端Form簡單表單制作及onSubmit事件手機端Form簡單表單制作

form表單送出onclick和onsubmit

android中怎麼儲存checkbox中的checked屬性_第二十四天HTML中的form表單

antd vue form 手動校驗_chaso-form：基于Vue和ElementUI的配置式表單元件

antd vue form 手動校驗_三分鐘為你細數 Vue el-form 表單校驗的坑點背景el-form 的 model 屬性el-from-item 的 prop 屬性多表單校驗非直接子屬性的校驗問題啟示錄

form送出後重新整理網頁_【VSRC唯科普】穿越網頁表單與登入視窗的采集（第9/14篇）...

angular form表單送出資料

angular使用表單form綁定formGroup屬性報錯：Can't bind to 'formGroup' since it isn't a known property of 'form'

JVS低代碼表單引擎系列：jvs-form表單如何與邏輯引擎關聯？

JVS低代碼表單引擎系列：jvs-form表單支援哪幾種樣式？

Spring MVC接收前台form表單送出資料的亂碼問題

jquery 回車事件會觸發頁面重新整理，自動送出表單

form表單序列化與對象裝填form表單

layer送出圖檔與form表單同時送出資料