阻止form表单提交的问题
2024-10-14 19:20:02
阻止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>
参考资料
http://stackoverflow.com/questions/4924036/return-false-on-addeventlistener-submit-still-submits-the-form
最新文章
- mssql2000 身份证号码验证
- Unity粒子系统特性
- js日历表
- Disaster Recovery, High Availability, and Continuous Availability - What's the Difference?
- SqlHelper include Transaction
- asp.net中c# TextBox.MaxLength例子
- ASP.Net大文件上传组件详解
- （转）分享一个SQLSERVER脚本（计算数据库中各个表的数据量和每行记录所占用空间）
- poj 3258 River Hopscotch（二分搜索之最大化最小值）
- UESTC_秋实大哥去打工 2015 UESTC Training for Data Structures<Problem G>
- 创建以 API 为中心的 Web 应用
- GIS制图人员的自我修养(1)--制图误区
- mysql性能监控工具
- 哨兵2 NDVI
- java中构造代码块、方法调用顺序问题
- delphi 多线程之System.TMonitor （续一）
- Gulp 新手使用
- 关于服务器时区BEIST-8、GMT-8、Asia/Shanghai、CST、GMT+8:00等缩写的含义
- bzoj1238
- 【Selenium-WebDriver问题篇】Selenium实现元素的拖拽（java版）（转）