使用表单验证:为什么onsubmit ="return functionname()"而不是onsubmit ="functionname()"？

Question

这个问题非常明显.我不明白返回在以下代码中做了什么:

<form onsubmit="return somefunction()">

Answer 1

您需要返回,以便将true/false传递给表单的提交事件(如果获取为false,则会查找此事件并阻止提交).

让我们看看一些标准的JS:

function testReturn() { return false; }

如果您只是在任何其他代码中调用它(无论是onclick处理程序还是在其他地方的JS中),它将返回false,但您需要对该值执行某些操作.

...
testReturn()
...

在该示例中,返回值将返回,但没有任何事情发生.你基本上是说执行这个函数,我不在乎它返回什么.相反,如果你这样做:

...
var wasSuccessful = testReturn();
...

然后你已经用返回值做了一些事情.

这同样适用于onclick处理程序.如果你只是在onsubmit中调用没有返回的函数,那么你就是说"执行此操作,但如果返回false则不要阻止该事件." 这是表示在提交表单时执行此代码的一种方式,但不要让它停止事件.

一旦你添加了回报,你就会说你正在调用的东西应该确定事件(提交)是否应该继续.

此逻辑适用于HTML中的许多onXXXX事件(onclick,onsubmit,onfocus等).

Answer 2

GenericTypeTea所说的扩展 - 这是一个具体的例子:

<form onsubmit="return false">

上述表格不会提交,而......

<form onsubmit="false">

......什么都不做,即表格会提交.

如果没有return,onsubmit则不会收到值,并且事件的执行就像没有任何处理程序一样.

Answer 3

false从函数返回将停止事件继续.即它将停止提交表单.

即

function someFunction()
{
    if (allow) // For example, checking that a field isn't empty
    {
       return true; // Allow the form to submit
    }
    else
    {
       return false; // Stop the form submitting
    }
}

Answer 4

HTML 事件处理程序代码的行为类似于 JavaScript 函数的主体。许多语言（如 C 或 Perl）隐式返回函数体中最后一个表达式的值。JavaScript 不会，它会丢弃它并返回 undefined ，除非您编写显式returnEXPR。

Answer 5

当将onsubmit（或任何其他事件）作为HTML属性提供时，在为DOM对象创建DOM对象时，该属性的字符串值（例如“ return validate（）;”）将作为实际onsubmit处理函数的主体插入。元件。

这是浏览器控制台中的简短证明：

var p = document.createElement('p');
p.innerHTML = '<form onsubmit="return validate; // my statement"></form>';
var form = p.childNodes[0];

console.log(typeof form.onsubmit);
// => function

console.log(form.onsubmit.toString());
// => function onsubmit(event) {
//      return validate(); // my statement
//    }

因此，如果在注入的语句中提供了return关键字；当触发提交处理程序时，将从validate函数调用接收到的返回值作为提交处理程序的返回值传递，从而对控制表单的提交行为生效。

如果没有在字符串中提供返回值，则生成的onsubmit处理程序将没有显式的return语句，并且在触发时，它将返回undefined（默认函数return），而与validate（）返回true或false无关，并且都将以两种形式提交表单案件。