HTML中form表单onsubmit写return func()和func()哪个正确，有何区别

核心差异 #

<form onsubmit="return func()">和<form onsubmit="func()">的本质区别是：是否将自定义函数的返回值传递给onsubmit事件处理器，以此控制表单的默认提交行为。

HTML原生的onsubmit事件有固定规则：如果事件处理器的返回值为false，就会终止表单默认的提交跳转动作；如果返回值为true或者没有返回值，就会正常执行提交。

• 写onsubmit="func()"时，仅会触发执行func函数，不会把函数的返回值传递给onsubmit事件。无论func返回什么内容，onsubmit都接收不到，最终都会默认走提交逻辑。
• 写onsubmit="return func()"时，会把func执行后的返回值直接作为onsubmit事件的返回值。此时如果func返回false，onsubmit就会终止提交；返回true则正常提交。

实际场景示例 #

假设你写了一个表单校验函数：

function checkForm() {
  // 校验输入框是否为空
  if(document.getElementById('account').value.trim() === '') {
    alert('账号不能为空')
    return false
  }
  return true
}

• 如果表单写<form onsubmit="checkForm()">：就算用户没填账号，函数返回了false，弹完警告后表单仍然会提交跳转。
• 如果表单写<form onsubmit="return checkForm()">：用户没填账号时，函数返回的false会传递给onsubmit，弹完警告后就会停止提交，停在当前页让用户修正内容。

什么时候需要加return #

只有当你需要在表单提交前做校验、逻辑判断，并且符合某个条件时要阻止表单默认提交的场景，才需要加return。
如果你只是需要在提交前触发一些不影响提交的操作（比如埋点上报、给提交按钮加loading状态），不需要阻止提交的话，两种写法效果完全一致。

内容的提问来源于stack exchange，提问作者Subhadeep