preventDefault方法阻止浏览器的默认动作

最新推荐文章于 2023-05-23 14:27:05 发布

江南极客

最新推荐文章于 2023-05-23 14:27:05 发布

阅读量2.6k

点赞数

分类专栏： HTML JS 文章标签： DOM 表单 form submit preventDefault

本文链接：https://blog.csdn.net/sinat_35861727/article/details/78554877

版权

JS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

在form表单提交的时候，我们通常需要对表单填写的内容进行验证，比如是否为空，格式是否正确之类的检查验证，在前端检查验证通过了才会提交到后端，虽然一般后端也会验证，但为了减轻服务器的压力，会先经过前端验证。所以在点击提交按钮的时候，不能直接提交到后台，而是先验证，如果填写不合格就不提交，都合格了再执行提交动作。

常用的阻止提交有两种方法：
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>

谢谢观看！

江南极客

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
preventDefault方法阻止浏览器的默认动作

在form表单提交的时候，我们通常需要对表单填写的内容进行验证，比如是否为空，格式是否正确之类的检查验证，在前端检查验证通过了才会提交到后端，虽然一般后端也会验证，但为了减轻服务器的压力，会先经过前端验证。所以在点击提交按钮的时候，不能直接提交到后台，而是先验证，如果填写不合格就不提交，都合格了再执行提交动作。
复制链接

扫一扫