天天看點

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

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表單

具體的方式是:

  1. 擷取form表單dom對象
  2. 調動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值會被送出到伺服器

<form method="post" action="test.php"> <p> <select name="city"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="sz">深圳</option> <option value="cq">重慶</option> <option value="cd">成都</option> </select> </p> <p><input type="submit" value="送出"></p></form>

若選中下面的城市,然後送出:

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

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

city=cd

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

單選框

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

<form method="post" action="test.php"> <p> 性别: <label><input type="radio" name="sex" value="male">男</label> <label><input type="radio" name="sex" value="female">女</label> </p> <p> 學曆: <label><input type="radio" name="xueli" value="chuzhong">國中</label> <label><input type="radio" name="xueli" value="gaozhong">高中</label> <label><input type="radio" name="xueli" value="dazhuan">大專</label> <label><input type="radio" name="xueli" value="benke">大學</label> <label><input type="radio" name="xueli" value="qita">其他</label> </p> <p><input type="submit" value="送出"></p></form>

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

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

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

sex=male&xueli=benke

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

多選框

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

<form method="post" action="test.php"> <p> 愛好: <label><input type="checkox" name="like" value="football">足球</label> <label><input type="checkox" name="like" value="basketball">籃球</label> <label><input type="checkox" name="like" value="music">音樂</label> <label><input type="checkox" name="like" value="movie">電影</label> <label><input type="checkox" name="like" value="read">閱讀</label> </p> <p><input type="submit" value="送出"></p></form>

若使用者選中以下内容,然後送出:

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

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

like=football&like=music&like=read

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

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

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

是以,結尾,撒花

繼續閱讀