返回 false 不停止提交表单答案

【问题标题】：returning false not stopping the submission of form返回 false 不停止提交表单
【发布时间】：2015-04-23 07:10:06
【问题描述】：

我的目的：如果用户字段和密码字段为空，我想停止表单提交。这是我正在尝试的代码：

<!DOCTYPE html>
<html>
<head>
    <script>
        function doit() {

            var usr = document.getElementById('ur').value;
            var psw = document.getElementById('pw').value;

            if ((usr.trim() == '') && (psw.trim() == '')) {
                alert("cannot Submit form");
                return false;
            }

        }
    </script>

</head>


<body>

    <form action="post.php" method="post" onsubmit="doit()">
        User:
        <input type="text" id="ur" name="user">
        <br>
        <br> Pass:
        <input type="password" id="pw" name="pass">
        <br>
        <br>
        <button>Submit</button>
    </form>


</body>
</html>

我正在学习 JavaScript。如果您更正代码并稍微解释一下为什么它不起作用，这将很有帮助。

【问题讨论】：

将required 属性添加到您的输入中，在现代浏览器中效果将是相同的。在你的函数中，我会使用 OR 运算符，而不是 AND - 两个值都不应该为空。

标签： javascript

【解决方案1】：

return false 工作正常，但您调用该函数的方式是错误的。

<form action="post.php" method="post" onsubmit="doit()">

只是调用它，不对返回值做任何事情

<form action="post.php" method="post" onsubmit="return doit()"> 
                                                ^

将在返回错误值时停止表单发布。

在 MSDN 上阅读此说明，尽管它不是 IE 特定的

您可以通过在事件处理程序中返回 false 来覆盖此事件。使用此功能在客户端验证数据，以防止将无效数据提交到服务器。如果事件处理器被表单对象的onsubmit属性调用，代码必须使用return函数显式请求返回值，并且事件处理器必须为事件处理器中每一个可能的代码路径提供一个显式的返回值功能。

现在谈另一个重要的点。

您的if 条件只会在两个字段都为空白时停止表单提交，而即使这两个字段中的任何一个字段为空白，它也应该这样做。 && (AND) 应该是 || (OR)，如果没有返回 false，则在函数的末尾，return true 然后。

【讨论】：

关于 >，事件处理程序必须为事件处理程序函数中的每个可能的代码路径提供一个显式返回值——不要忘记添加一个return true;（或别的东西）在doit()的末尾！
@Bob - 在末尾添加 return true 不是必需的，尽管这样做会很好，因为它可以避免在某些编辑器和 lint 检查器中出现“并非所有路径都返回值”警告。但是没有它，代码将正常工作。如果在没有return 的情况下退出函数末尾，则函数返回undefined，它与false 的值不同。考虑一个从不返回 true 或 false 或任何值的事件处理程序的常见情况 - 这样的函数将允许提交表单。你必须明确地return false 来阻止提交。
@MichaelGeary 从字面上看，如果处理程序必须提供 explicit 返回值，那么依赖隐式是不正确的undefined。在实践中，据我所知，您所说的将适用于所有当前的浏览器，根据 HTML/ECMAScript 规范甚至可能更正确（我没有时间检查），但如果我们要使用 MSDN 文章就其本身而言，显式返回值是必需的。（不过，这是 MSDN 和 IE 的重点，据我所知，它可能只是涵盖 VBS ......）
@Bob - 这只是 MSDN 文章中的草率措辞。最后一部分，“......并且事件处理程序必须为事件处理程序函数中的每个可能的代码路径提供一个明确的返回值”，这是完全错误的。无论您是否使用return 语句，每个函数的每次返回都始终提供一个明确的返回值。如果您在没有return 的函数末尾掉线，则该函数返回undefined。如果 MSDN 文章是正确的，您可以在函数末尾使用显式 return undefined 来满足其要求，但这与没有 return 相同。

【解决方案2】：

onsubmit 事件接受布尔值，因为您没有返回任何内容，因此默认情况下它假定为 true。您需要在此事件中明确添加返回，如下所述：

改变

onsubmit="doit()">

到

onsubmit="return doit()">

【讨论】：

【解决方案3】：

在提交时使用 addEventListener 和 preventDefault()

document.form1.addEventListener( "submit", function(event) {

    var user = this.querySelector("input[name=user]").value; // this = object of form1
    var pass = this.querySelector("input[name=pass]").value;

    if ( (user.trim() == "") || (pass.trim() == "") ) {
        alert("cannot Submit form");
        event.preventDefault();
    } else {
        alert("submit");
    }

} );

<form action="" method="post" name="form1" >
    Username: <input type="text" name="user" /><br><br>
    Password: <input type="password" name="pass" /><br><hr>
    <input type="submit" value="Submit" />
</form>

codepen

repl.it

【讨论】：