表单的“action”和“onsubmit”：哪个先执行？

Posted 2023-02-22

【中文标题】表单的“action”和“onsubmit”：哪个先执行？

【英文标题】：A form's "action" and "onsubmit": Which executes first?

【发布时间】：2015-05-14 21:25:15

【问题描述】：

我正在尝试调试网页，我看到一个表单元素，其开头是

<form name="aspnetForm" method="post" action="default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">

只有网络forms 的基础知识，我想知道action 和onsubmit 的执行顺序是什么。

【问题讨论】：

javascript: 在 onsubmit 中没用

【参考方案1】：

首先执行onsubmit以检查格式等。然后执行action以获取/发布数据到后端。

【讨论】：

如果表单有效并且正确提及操作，则不会调用 onsubmit。

【参考方案2】：

这在 html5 规范中有解释：

4.10.22.3 Form submission algorithm

当 form 元素 form 从元素提交 提交者（通常是一个按钮），可选择设置从submit()方法提交标志，用户代理必须运行 以下步骤：

让form document成为form的Document。

如果表单文档没有关联的browsing context或其active sandboxing flag set设置了sandboxed forms browsing context flag，则中止这些步骤而不做任何事情。

让表单浏览上下文为表单文档的browsing context。

如果从submit()方法提交标志没有设置，并且提交者元素的no-validate state为假，那么 form 的interactively validate the constraints 并检查 result：如果结果是否定的（约束验证结束 有无效的字段，并可能通知了用户） 然后 fire a simple event 在 form 元素处命名为 invalid 然后中止这些步骤。

如果从submit() 方法提交 标志未设置，则fire a simple event 冒泡并且可以取消命名 submit，在 form。如果事件的默认操作被阻止（即 如果事件被取消）然后中止这些步骤。否则，继续 （实际上默认操作是执行提交）。

让 form 数据集 成为 submitter 上下文中 form 的 constructing the form data set 的结果。

让 action 成为 submitter 元素的action。

如果action为空字符串，则action为表单文档的the document's address。

Resolve URL action，相对于 submitter 元素。如果失败，请中止这些步骤。

让 action 成为结果 absolute URL。

让动作组件成为结果parsed URL。

让 scheme 成为结果 parsed URL 的 scheme。

让 enctype 成为 submitter 元素的enctype。

让 method 成为 submitter 元素的method。

让 target 成为 submitter 元素的target。

如果用户在提交表单时指定了特定的browsing context，则让目标浏览上下文为 browsing context。否则，应用 the rules for choosing a browsing context given a browsing context name 使用 target 作为 名称和表单浏览上下文作为 算法被执行，并让目标浏览上下文成为 结果browsing context。

如果 目标浏览上下文 在上一步中创建，或者，如果 表单文档 尚未 completely loaded 和 从submit() 方法提交 标志是 设置，然后让 replace 为真。否则，就让它为假。

否则，请根据每行第一个单元格给出的 scheme 值在下表中选择适当的行。然后， 根据 method 的值在该行中选择适当的单元格 如每列的第一个单元格中所示。然后，跳到步骤 在该单元格中命名并在表格下方定义。

           |        GET        |         POST
-------------------------------------------------------
http       | Mutate action URL | Submit as entity body
https      | Mutate action URL | Submit as entity body
ftp        | Get action URL    | Get action URL
javascript | Get action URL    | Get action URL
data       | Get action URL    | Post to data:
mailto     | Mail with headers | Mail as body

如果 scheme 不是此表中列出的其中之一，则此规范未定义该行为。用户代理应该在 没有其他规范对此进行定义，以某种方式行事 类似于本规范中定义的类似方案。

因此，在第 5 步，submit 被触发，并且可以取消以阻止表单提交。之后该操作就解决了。

【参考方案3】：

如果先解析action，那么浏览器会离开页面，JS执行环境消失，onsubmit中的JS无处可运行，所以不是。

事件处理程序在默认操作之前运行。他们可以取消默认操作。

【参考方案4】：

onsubmit 必须首先执行，因为从它返回 false 会停止提交表单，因此 action 会被请求。