阻止form表单提交的问题

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

阻止form表单提交这种场景可能在生活中，我们经常碰到，而在我们第一印象里面可能我们用return false 去阻止表单默认行为。

但是，有中情况我们用return false 不能阻止表单提交

<div class="warp">
<h2>登录到pfan空间</h2>
<p>这里有更多的知识分享，交流。</p>
<form action="/register" method = "post" >
<input type="text" name = "username" placeholder = "请输入注册用户名"> <br />
<input type="password" name = "pwd" placeholder = "请输入初始密码"> <br />
<input type="password" name = "aginpwd" placeholder = "请再次输入密码"> <br />
<input type="submit" value ="注册" class="login_btn">
</form>
</div>
<script>
var form = document.forms[],
submit = document.querySelector(".login_btn"),
inputBtn = document.getElementsByTagName("input");
console.log(form);
form.addEventListener("submit",function(){
if(inputBtn[].value == ""){
alert("请您认真填写注册用户名！");
return false;
}else if(inputBtn[].value == ""){
alert("请您认真输入初始密码！");
return false;
}else if(inputBtn[].value == ""){
alert("请您再次输入密码");
return false;
}else if(inputBtn[].value != inputBtn[].value){
alert("两次密码输入不匹配，请更正！");
return false;
}
},false);</script>

以上代码我们看着，好像没有错误，但是，表单依然可以提交，测试环境chrome。

但是我们将return false 改成用 e.preventDefault()，却可以达到阻止表单提交的效果：

<div class="warp">
<h2>登录到pfan空间</h2>
<p>这里有更多的知识分享，交流。</p>
<form action="/register" method = "post" >
<input type="text" name = "username" placeholder = "请输入注册用户名"> <br />
<input type="password" name = "pwd" placeholder = "请输入初始密码"> <br />
<input type="password" name = "aginpwd" placeholder = "请再次输入密码"> <br />
<input type="submit" value ="注册" class="login_btn">
</form>
</div>
<script>
var form = document.forms[],
submit = document.querySelector(".login_btn"),
inputBtn = document.getElementsByTagName("input");
console.log(form);
form.addEventListener("submit",function(e){
if(inputBtn[].value == ""){
alert("请您认真填写注册用户名！");
e.preventDefault();
}else if(inputBtn[].value == ""){
alert("请您认真输入初始密码！");
e.preventDefault();
}else if(inputBtn[].value == ""){
alert("请您再次输入密码");
e.preventDefault();
}else if(inputBtn[].value != inputBtn[].value){
alert("两次密码输入不匹配，请更正！");
e.preventDefault();
}
},false);</script>

另一种就是将其改成用onsubmit:

<div class="warp">
<h2>登录到pfan空间</h2>
<p>这里有更多的知识分享，交流。</p>
<form action="/register" method = "post" >
<input type="text" name = "username" placeholder = "请输入注册用户名"> <br />
<input type="password" name = "pwd" placeholder = "请输入初始密码"> <br />
<input type="password" name = "aginpwd" placeholder = "请再次输入密码"> <br />
<input type="submit" value ="注册" class="login_btn">
</form>
</div>
<script>
var form = document.forms[],
submit = document.querySelector(".login_btn"),
inputBtn = document.getElementsByTagName("input");
console.log(form);
form.onsubmit = function(){
if(inputBtn[].value == ""){
alert("请您认真填写注册用户名！");
return false;
}else if(inputBtn[].value == ""){
alert("请您认真输入初始密码！");
return false;
}else if(inputBtn[].value == ""){
alert("请您再次输入密码");
return false;
}else if(inputBtn[].value != inputBtn[].value){
alert("两次密码输入不匹配，请更正！");
return false;
} }
</script>