在前端开发中，表单是非常常见的一种交互方式。而提交表单则是表单所必须的一个动作。本文将介绍如何使用 JavaScript 提交表单。
表单提交
在 HTML 中，我们可以通过 <form> 元素来创建表单。当用户点击表单中的提交按钮时，表单就会被提交到指定的 URL 地址。表单提交有两种方式：
- GET：以 URL 参数形式提交表单数据。
- POST：将表单数据放在 HTTP 请求体中提交。
在 JavaScript 中，可以使用 submit() 方法来提交表单。该方法可以用于具有 submit 类型的按钮、以及使用 form.submit() 方式调用。
使用 submit() 方法提交表单
下面是一个简单的示例，演示了如何使用 submit() 方法提交表单：
----- ----------- ----------------------------------- --------------
-------
----
------ ----------- --------------- --
--------
--- --
-------
---
------ --------------- --------------- --
--------
--- --
------- ------------- ----------------------------------
-------
--------
-------- ------------ -
----- ---- - ----------------------------------
--------------
-
---------在上面的代码中，我们定义了一个 ID 为 myForm 的表单，并将其 action 属性设置为 https://example.com/submit，将其 method 属性设置为 post。同时，我们定义了两个输入框和一个提交按钮。
当用户点击提交按钮时，就会调用 submitForm() 方法。该方法获取表单元素，并调用 submit() 方法来提交表单。
防止表单自动提交
在使用 JavaScript 提交表单时，有一点需要注意。如果我们使用了 <button> 元素来作为提交按钮，并且没有设置 type 属性，那么浏览器默认会将其作为 submit 类型的按钮。这样，当用户点击该按钮时，表单就会自动提交。
为了防止表单自动提交，我们需要将按钮的 type 属性设置为 button。这样，即使用户点击该按钮，也不会触发表单的提交行为。示例如下：
----- ----------- ----------------------------------- --------------
-------
----
------ ----------- --------------- --
--------
--- --
-------
---
------ --------------- --------------- --
--------
--- --
------- ------------- ----------------------------------
-------
--------
-------- ------------ -
----- ---- - ----------------------------------
--------------
-
---------表单校验与提交
在实际开发中，我们通常需要对表单数据进行校验，以确保用户输入的数据符合要求。在校验通过后，才能提交表单。
下面是一个简单的示例，演示了如何对表单数据进行校验，并在校验通过后提交表单：
----- ----------- ----------------------------------- --------------
-------
----
------ ----------- --------------- -------- --
--------
--- --
-------
---
------ --------------- --------------- -------- --
--------
--- --
------- ------------- -----------------------------------------
-------
--------
-------- ------------------- -
----- ---- - ----------------------------------
-- ---------------------- -
--------------
- ---- -
-------------------
-
-
---------在上面的代码中，我们使用 HTML5 的 required 属性来标记输入框为必填项
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10645