javascript - 为什么我的 onsubmit 函数提前退出而不返回 false？

Question

<form method="post" action="/Order/CheckOut/" onSubmit="return Validate()">

进而...

function Validate() {
    alert($("#email").val());
    return false;
}

混乱的部分是当我取出警报时它工作正常，提交失败，但是当我放入警报时，它允许提交通过......这到底是什么？

我也试过这个：

function Validate() {
    if(document.getElementByID("email").value == "test"){
        alert("It says test.");
    }
    return false;
}

并得到相同的行为，它永远不会进入return语句......

如果我用 firebug 单步执行 JS 并在警报或 if 处中断（取决于上面的版本），它会停在那里，然后我单击“step into”，它只是提交表单，为什么不让它到返回假线？

score 2 · Accepted Answer

你可以event.preventDefault()改用。

$("form[name='myForm']").submit(function(e){
  e.preventDefault();
  alert($("#email").val());
});

您应该尝试将您的 javascript、css 和 html 全部分开。不要集成它们，否则会使项目更难管理。onsubmit而不是在 HTML中使用属性，只需$.submit()像我上面所做的那样，将您的逻辑从您的 javascript 附加到表单的方法中。

此示例假定您已为表单命名为“myForm”。我只是在示例中使用了它，因为您应该确定您正在处理哪个表单的提交事件，而不是使用通用$("form")选择器。

score 2 · Accepted Answer

如果您已经在使用 jQuery，那么您一开始就做错了事。您不应该onSubmit从<form>元素内手动指定处理程序。按照@Jon 的建议做，只需绑定提交事件：

$("form").submit(function() {
    alert($("#email").val());
    return false;
});

score 2 · Accepted Answer

为什么不将它包装在 try 块中？

function Validate() {
    try {
        alert($("#email").val());
    } catch (e) {
        alert("Problem: " + e);
    }

    return false;
}

score 1 · Accepted Answer

问题不在于您的函数返回 true。问题是警报中的 JavaScript 失败并且 JavaScript 退出解释代码。此时，浏览器将继续执行默认操作，即提交表单。

这就是 Jonathan Sampson 建议在 alert() 之前使用 e.preventDefault() 的原因，这样当 alert() 失败时浏览器不会继续其默认行为。

4 回答 4