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

Question

这个问题很容易理解。我不理解下面代码中return语句的作用：

<form onsubmit="return somefunction()">

- zjmiller

Answer 1

你需要返回值，这样true/false就能被传递到表单的提交事件中（该事件会查找这个值，如果它收到false则会阻止提交）。

让我们看一些标准的JS：

function testReturn() { return false; }

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

...
testReturn()
...

在这个示例中，返回值是返回的，但它没有被使用。你基本上在说执行这个函数，我不关心它返回什么。相比之下，如果你这样做：

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

如果你使用了返回值，那么你已经对返回值进行了某些操作。

对于onclick事件处理程序也是如此。如果在onsubmit中只调用函数而没有返回值，那么你的意思是“执行这个函数，但如果它返回false则不要阻止事件”。这是一种表示当表单提交时执行此代码，但不要让它停止事件的方式。

一旦添加了return语句，就表示你所调用的内容应该决定事件（提交）是否应该继续。

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

- Parrots

---

我修复了一个bug，然后搜索了一下这个bug，发现了这个答案。;) 顺便说一句，这是一个好答案。 - ThilankaD

Answer 2

在GenericTypeTea所说的基础上，这里给出一个具体的例子：

<form onsubmit="return false">

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

<form onsubmit="false">

如果没有 return，即使表单中有 submit 操作，onsubmit 也不会执行任何操作。

没有 return，onsubmit 不会收到返回值，事件会像没有任何处理程序一样被执行。

- Amir Raminfar

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

- djdd87

---

但如果我们只有onSubmit =“someFunction（）”，为什么函数不会返回false呢？ - zjmiller

例如，函数test() {return "asdf"}; alert(test()); 触发一个弹出窗口，显示"asdf"，但我不需要输入alert(return test()); - zjmiller

@zjmiller - 因为return表示表达式的值应返回到提交程序。如果表达式评估为false，则提交程序将被取消。 - djdd87

为了加强GenericTypeTea出色的解释，可以将onsubmit视为JavaScript变量，将引号中的内容视为JavaScript函数。因此，“someFunction()”和“return somefunction()”都会导致someFunction()被执行，但是“someFunction()”会丢弃someFunction()的返回值，而“return someFunction()”则将返回值分配给onsubmit变量。这完全是由于JavaScript的宽松特性，允许您以任何方式定义函数，因此解释器必须接受您所做的任何操作... - Sheldon R.

Answer 4

当onsubmit(或其他事件)作为HTML属性提供时，该属性的字符串值(例如"return validate();" )将被注入为实际的onsubmit处理程序函数的主体，在DOM对象为元素创建时。在浏览器控制台中，可以进行简要的验证。

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函数调用接收到的返回值将作为提交处理程序的返回值传递，并因此对表单的提交行为产生影响。

如果字符串中没有提供return，则生成的onsubmit处理程序将没有显式的返回语句，当触发时，它将返回undefined（默认函数返回值），无论validate()返回true还是false，表单都会被提交。

- mshalaby

---

是的，这就是我想要阅读的内容；onsubmit实际上是一个函数体，类似于函数的{...}，而不是一个属性。 - WesternGun

感谢您提供有用的描述（和证据！）以解释幕后实际发生的情况 - 这真正回答了问题，并提供了有助于理解的解释。 - Andrew Merrill

Answer 5

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

- Denis Howe

---

那是一个有效的答案...第一句话就解释了一切。 - WesternGun

Answer 6

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

- JOAO HENRIQUE GONCALVES DE SA

---

这个回答如何解决问题？此外，这个问题已经两年了。请尝试回答未解决的问题。 - Mifeet