在form表单提交的时候,我们通常需要对表单填写的内容进行验证,比如是否为空,格式是否正确之类的检查验证,在前端检查验证通过了才会提交到后端,虽然一般后端也会验证,但为了减轻服务器的压力,会先经过前端验证。所以在点击提交按钮的时候,不能直接提交到后台,而是先验证,如果填写不合格就不提交,都合格了再执行提交动作。
常用的阻止提交有两种方法:
1.直接return false,这个只对DOM1级提交事件有效,对DOM2级事件是无效的;
2.使用事件对象的preventDefault()方法,此方法对DOM1和DOM2级事件都起作用。
常用的阻止提交有两种方法:
1.直接return false,这个只对DOM1级提交事件有效,对DOM2级事件是无效的;
2.使用事件对象的preventDefault()方法,此方法对DOM1和DOM2级事件都起作用。
演示代码如下:
<!DOCTYPE html>
<html>
<head>
<title>阻止浏览器默认动作</title>
<meta charset="UTF-8">
<style>
.form_div{
width:300px;
height:200px;
background:#ccc;
padding:20px;
margin-left:20px;
float:left;
}
</style>
</head>
<body>
<h2>阻止浏览器默认动作</h2>
<div class="form_div">
<form action="./post.php" method="post">
<p>用户名:<input type="text" name="username" value="" /></p>
<p>密码:<input type="password" name="password" value="" /></p>
<p>邮箱:<input type="text" name="email" value="" /></p>
<p><input type="submit" value="提交" /></p>
</form>
</div>
<div class="form_div">
<form action="./post.php" method="post">
<p>用户名:<input type="text" name="username" value="" /></p>
<p>密码:<input type="password" name="password" value="" /></p>
<p>邮箱:<input type="text" name="email" value="" /></p>
<p><input type="submit" value="提交" /></p>
</form>
</div>
<div class="form_div">
<form action="./post.php" method="post">
<p>用户名:<input type="text" name="username" value="" /></p>
<p>密码:<input type="password" name="password" value="" /></p>
<p>邮箱:<input type="text" name="email" value="" /></p>
<p><input type="submit" value="提交" /></p>
</form>
</div>
<div style="clear:both;"></div>
</body>
<script type="text/javascript">
//3.验证表单,阻止浏览器默认动作
var formtag1 = document.getElementsByTagName('form')[0];
formtag1.onsubmit = function(){
alert('第1个表单有误');
return false; //阻止跳转
}
var formtag2 = document.getElementsByTagName('form')[1];
formtag2.addEventListener('submit',function(){
alert('第2个表单有误');
return false; //return false;阻止跳转只对DOM1级事件起作用,对DOM2级事件不起作用
});
var formtag3 = document.getElementsByTagName('form')[2];
formtag3.addEventListener('submit',function(e){
alert('第3个表单有误');
e.preventDefault(); //此方法阻止跳转,对DOM1和DOM2级事件都起作用
});
</script>
</html>
谢谢观看!