Javascript 返回 false 不会停止提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29816168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
returning false not stopping the submission of form
提问by Asif Iqbal
My purpose: If the user field and password field are blank, I want to stop form submitting. This is my Code that I am trying:
我的目的：如果用户字段和密码字段为空，我想停止提交表单。这是我正在尝试的代码：
<!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>
I am learning JavaScript. Will be helpful if you correct the code with a little explanation why it is not working.
我正在学习 JavaScript。如果您更正代码并解释为什么它不起作用，将会很有帮助。
回答by Hanky Panky
return falseis working fine, the way you are callingthat function is wrong.
return false工作正常，您调用该函数的方式是错误的。
<form action="post.php" method="post" onsubmit="doit()">
Just calls it, doesn't do anything with the return value
只是调用它，对返回值不做任何事情
<form action="post.php" method="post" onsubmit="return doit()">
^
Will stop the form post on a false returned value.
将在错误的返回值上停止表单发布。
Read this note on MSDNalthough it is not IE specific
在MSDN上阅读此注释，尽管它不是特定于IE 的
You can override this event by returning false in the event handler. Use this capability to validate data on the client side to prevent invalid data from being submitted to the server. If the event handler is called by the onsubmit attribute of the form object, the code must explicitly request the return value using the return function, and the event handler must provide an explicit return value for each possible code path in the event handler function.
您可以通过在事件处理程序中返回 false 来覆盖此事件。使用此功能在客户端验证数据，以防止将无效数据提交到服务器。如果事件处理程序由表单对象的 onsubmit 属性调用，则代码必须使用返回函数显式请求返回值，并且事件处理程序必须为事件处理程序函数中每个可能的代码路径提供显式返回值。
Now onto another important point.
现在进入另一个重要的点。
Your ifcondition will only stop form submission when both the fields are blank, whereas it should do that even if any one of those two fields is blank. That &&(AND) should be an ||(OR), and at the end of your functions if nothing returned false, return truethen.
您的if条件只会在两个字段都为空时停止表单提交，而即使这两个字段中的任何一个为空，它也应该这样做。那个&&(AND) 应该是一个||(OR)，如果没有返回 false，return true那么在你的函数结束时。
回答by Danyal Sandeelo
onsubmitevent accepts boolean values, since you are not returning anything so it assumes true by default. You need to add return in this event explicitly like mentioned below:
onsubmitevent 接受布尔值，因为您没有返回任何内容，因此默认情况下它假定为 true。您需要在此事件中明确添加 return ，如下所述：
change
改变
onsubmit="doit()">
to
到
onsubmit="return doit()">
回答by antelove
Using addEventListener on submit with preventDefault()
在使用 preventDefault() 提交时使用 addEventListener
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>