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表单同时提交数据