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

【问题标题】：A form's "action" and "onsubmit": Which executes first?表单的“action”和“onsubmit”：哪个先执行？
【发布时间】：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 中没用

标签： javascript html forms post

【解决方案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 会被请求。

【讨论】：