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

With form validation: why onsubmit="return functionname()" instead of onsubmit="functionname()"?

提问by zjmiller

The question is pretty self-explanatory. I don't understand what the return is doing in the following code:

这个问题是不言自明的。我不明白以下代码中的返回在做什么：

<form onsubmit="return somefunction()">

回答by Parrots

You need the return so the true/false gets passed up to the form's submit event (which looks for this and prevents submission if it gets a false).

您需要返回，以便将 true/false 传递给表单的提交事件（该事件会查找此信息并在为 false 时阻止提交）。

Lets look at some standard JS:

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

function testReturn() { return false; }

If you just call that within any other code (be it an onclick handler or in JS elsewhere) it will get back false, but you need to do something with that value.

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

...
testReturn()
...

In that example the return value is coming back, but nothing is happening with it. You're basically saying execute this function, and I don't care what it returns. In contrast if you do this:

在那个例子中，返回值回来了，但没有发生任何事情。你基本上是说执行这个函数，我不在乎它返回什么。相反，如果你这样做：

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

then you've done something with the return value.

那么你已经对返回值做了一些事情。

The same applies to onclick handlers. If you just call the function without the return in the onsubmit, then you're saying "execute this, but don't prevent the event if it return false." It's a way of saying execute this code when the form is submitted, but don't let it stop the event.

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

Once you add the return, you're saying that what you're calling should determine if the event (submit) should continue.

添加返回值后，您就是说您正在调用的内容应确定事件（提交）是否应继续。

This logic applies to many of the onXXXX events in HTML (onclick, onsubmit, onfocus, etc).

此逻辑适用于 HTML 中的许多 onXXXX 事件（onclick、onsubmit、onfocus 等）。

回答by Amir Raminfar

An extension to what GenericTypeTea says - Here is a concrete example:

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

<form onsubmit="return false">

The above form will not submit, whereas...

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

<form onsubmit="false">

...does nothing, i.e. the form will submit.

...什么都不做，即表单将提交。

Without the return, onsubmitdoesn't receive a value and the event is executed just like without any handler at all.

没有return,onsubmit不会接收值，并且事件的执行就像根本没有任何处理程序一样。

回答by djdd87

Returning falsefrom the function will stop the event continuing. I.e. it will stop the form submitting.

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

i.e.

IE

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
    }
}

回答by mshalaby

When onsubmit (or any other event) is supplied as an HTML attribute, the string value of the attribute (e.g. "return validate();") is injected as the bodyof the actual onsubmit handler functionwhen the DOM object is created for the element.

当 onsubmit（或任何其他事件）作为HTML 属性提供时，当为元素创建 DOM 对象时，属性（例如"return validate();"）的字符串值作为实际onsubmit 处理程序函数的主体注入。

Here's a brief proof in the browser console:

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

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
//    }

So in case the returnkeyword is supplied in the injected statement; when the submit handler is triggered the return value received from validatefunction call will be passed over as the return value of the submit handler and thus take effect on controlling the submit behavior of the form.

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

Without the supplied returnin the string, the generated onsubmithandler would not have an explicit return statement and when triggered it would return undefined(the default function return value) irrespective of whether validate()returns trueor falseand the form would be submitted in both cases.

如果没有return在字符串中提供，生成的onsubmit处理程序将没有显式的 return 语句，并且在触发时它将返回undefined（默认函数返回值），无论在这两种情况下是validate()返回true还是false提交表单。

回答by Denis Howe

HTML event handler code behaves like the body of a JavaScript function. Many languages such as C or Perl implicitly return the value of the last expression evaluated in the function body. JavaScript doesn't, it discards it and returns undefined unless you write an explicit returnEXPR.

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

回答by JOAO HENRIQUE GONCALVES DE SA

<script>
function check(){
    return false;
}
 </script>

<form name="form1" method="post" onsubmit="return check();" action="target">
<input type="text" />
<input type="submit" value="enviar" />

</form>