onclick="validateForm();return false"？答案

【问题标题】：onclick="validateForm();return false"?onclick="validateForm();return false"？
【发布时间】：2018-01-07 04:59:48
【问题描述】：

我遇到了一些涉及提交按钮的代码，其 onclick 属性为：onclick="validateForm();return false"。例如：

<!DOCTYPE html>
<html>
<head>
<title>form</title>
<script>
function validateForm() {
    var name = document.forms["myForm"]["fname"].value; 
    if (name.trim() == "") {
        document.getElementById("demo").innerHTML = "Name must be filled out!";  
    }
    else
        document.myForm.submit();
}
</script>
</head>
<body>

<div id="demo" style="color:red"></div><br>
<form name="myForm" action="formHandler.jsp" method="post" target="_blank">
    Name: <input type="text" name="fname"> <br> 
    <input type="submit" value="Submit" onclick="validateForm();return false"> 
</form>

</body>
</html>

即使我在上面的示例中删除 return false，我也看不出任何区别。只要输入了文本字段，返回 false 就不会停止提交表单。那么，document.myForm.submit() 提交表单后立即使用“return false”的目的是什么？

【问题讨论】：

可能是把监听器从表单移到了按钮上，这是一个愚蠢的想法，因为表单可以在不点击按钮的情况下提交，因此避免了按钮的验证。通过脚本提交绕过了提交监听器。
当它无效并且您单击按钮时会发生什么？我敢打赌它的行为不一样。

标签： javascript html

【解决方案1】：

这是在document.myForm.submit()提交的表单不是时，即在错误情况下。更好的编写方法可能是让validateForm 控制返回值：

function validateForm() {
    var name = document.forms["myForm"]["fname"].value; 
    if (name.trim() == "") {
        document.getElementById("demo").innerHTML = "Name must be filled out!";
        // Error; cancel the form submission
        return false;
    }

    // Just let the browser continue submitting; no need to .submit()
    return true;
}

和

<form name="myForm" action="formHandler.jsp" method="post" target="_blank"
      onsubmit="return validateForm()">
    Name: <input type="text" name="fname"> <br> 
    <input type="submit" value="Submit"> 
</form>

【讨论】：

return true 语句是多余的。 ;-)
@RobG：不过我不喜欢多类型函数！
考虑（其中 this 是表单）var isValid = /\w/.test(this.fname.value); if (!isValid) {/* do stuff if false */} return isValid; 将关注点分开，并且只有一个返回语句。 ;-)
@RobG：这不适合验证多个条件。

【解决方案2】：

检查工作示例：

function validateform(){  
var name=document.myform.name.value;  
var password=document.myform.password.value;  
  
if (name==null || name==""){  
  alert("Name can't be blank");  
  return false;  
}else if(password.length<6){  
  alert("Password must be at least 6 characters long.");  
  return false;  
  }  
}

  
  
<form name="myform" method="post" action="http://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return validateform()" >  
Name: <input type="text" name="name"><br/>  
Password: <input type="password" name="password"><br/>  
<input type="submit" value="register">  
</form>

【讨论】：