如何使用JavaScript提交HTML表单

我们什么时候填写表单？大多数情况下，我们是为了向某人提供关于某事的信息，这里的“某人”是服务器，而你是客户端。我们注册活动、填写求职申请表、输入登录信息，所有这些表单都将我们（客户端）提供的信息发送到服务器。在客户端使用的脚本语言是 JavaScript，而在服务器端使用的脚本语言是 PHP。本教程将解释如何使用客户端的 JavaScript 提交 HTML 表单。

上述段落的重点是，表单中提供的信息要提交到服务器。假设表单中的标签是姓名、年龄、电话号码和密码，用户可能需要满足一些要求才能填写表单。这些要求需要在用户单击提交按钮时进行检查，然后将表单发送到服务器。例如，有时当我们填写某些表单并遗漏一个输入字段时，它会使该字段变为红色并要求填写所有空白字段。

表单提交有两种方法——简单的 submit() 方法和验证方法。所有预定义的先决条件都在验证方法中进行检查，而在 submit() 方法中，只需单击按钮即可提交表单，而无需检查任何内容，我们将学习这两种方法。

首先，让我们设想一个场景

假设，我们正在创建一个包含以下标签的求职申请表

1. 名称
2. 年龄
3. 地址
4. 国家
5. 电话号码
6. 关于你
7. 密码
8. 确认密码

预定义要求

1. 密码和确认密码必须相同
2. 年龄必须大于 21 且小于 55
3. 电话号码必须是 10 位数字
4. 仅限印度
5. 所有八个详细信息都必须填写。

一种方法：（使用 form submit() 方法）

使用此方法，我们可以检查预定义的先决条件，但这会使代码有点复杂。因此，它主要用于通过单击按钮提交表单而不验证任何信息。

语法

这里，让我们暂时不考虑服务器部分，因为 PHP 是另一门语言。我们可以只使用另一个 HTML 页面，或者甚至可以使用网站链接。在 <form> 标签中，action 指的是要将表单详细信息提交到的页面。请注意，按钮的 type 被设置为“submit”，然后单击该按钮时，会调用 JS fun() 中的一个函数，该函数使用 submit() 函数将表单提交到 action 属性中给出的链接。现在，让我们看代码。

代码

观察颜色

输出

机制

1. 我们通过在表格的列中排列标签和输入字段来创建一个表单。我们创建了一个提交按钮，如语法所示，单击时调用 JS 中的 fun() 函数。
2. 我们对其进行了一些样式设计
3. 在 fun() 函数中，我们只是提交了表单。
4. 我们在 action 属性中提到了另一个 HTML 页面，并在提交表单时打开了它。
5. 请注意，客户端没有进行任何预先检查。
6. 您可能会想，为什么我们不能使用条件语句然后提交表单。让我们试试

看，即使所有要求都没有得到满足，也会显示一个警报消息，但表单仍然提交到了 action 属性中给出的网页。

是的，即使所有要求都没有得到满足，也会显示一个警报消息，但表单仍然提交到 action 属性中给出的网页。这是因为 submit() 的默认行为是仅提交表单而无需验证。

那么，有没有办法使用 submit() 进行验证呢？当然有。我们需要在调用 submit() 之前阻止 submit() 的默认行为。

在函数中的第 3 行，我们需要使用以下行

虽然奏效了，但请注意嵌套的 if-else 语句。嗯，我们可以为不同的先决条件使用不同的函数并将它们一个接一个地调用，但这仍然会很复杂。

现在，让我们转到第二种方法

提交前验证

1. 我们像在上面的方法中一样创建表单。
2. 在 <form> 标签中，我们有一个名为 onsubmit 的属性。
3. 我们不需要为按钮添加 onclick 事件。
4. 在 fun() 函数中，我们需要根据要求设置返回值为 true 或 false。
5. 只有当所有要求都满足时，我们才返回 true。
6. 现在，我们在 <form> 的 onsubmit 中设置 return fun()。
7. 只有当 fun() 返回 true 时，表单才会提交，并且值会被发送到 action 属性中的链接。

代码

观察颜色

• 另外，请注意 return 语句已高亮显示。只有当
  1. 密码与确认密码相同
  2. 年龄 > 21 且年龄 < 55
  3. 电话号码是 10 位数字
  4. 国家是印度
  5. 所有字段都已填写
  表单才会提交。
• 即使一个要求失败，也会显示一个警报消息。