4、阻止表单onsubmit事件的默认行为

最新推荐文章于 2024-06-21 10:55:09 发布

Bwz_Learning

最新推荐文章于 2024-06-21 10:55:09 发布

阅读量8.2k

点赞数 2

分类专栏： JavaScript_Bak 文章标签：阻止a标签的默认行为阻止form表单的默认行为 form a onsubmit

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51306707

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

1、阻止事件的默认行为

1.1 通过return false;

1.2 通过event.preventDefault();

2、阻止a标签的点击的默认行为

1.1 通过return false;

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>阻止事件的默认行为</title>

		</script>
		<script type="text/javascript">
			window.onload = function() {
				var a = document.getElementById('mya');
				a.onclick = function() {
					alert(this.innerHTML);
                                    /*通过return false; 实现阻止了点击a标签后,页面的跳转*/
					return false;
				}
			}
		</script>
	</head>

	<body>
		<a href="http://www.baidu.com" id="mya">百度一下</a>
	</body>

</html>

1.2 通过javascript:; 或者 javascript:void(0); 用的比较多

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>阻止事件的默认行为</title>

		</script>
		<script type="text/javascript">
			window.onload = function() {
				var a = document.getElementById('mya');
				a.onclick = function() {
					alert(this.innerHTML);
				}
			}
		</script>
	</head>

	<body>
		<a href="javascript:void(0);" id="mya">百度一下</a>   <!--通过javascript:void(0)-->
	</body>

</html>

3、通过阻止事件的默认行为,对表单进行验证

3.1 通过阻止表单的onsubmit()，实现对于表单的验证

如果输入的用户名的长度在5-10位之间,则提交表单;如果不符合这个条件就阻止表单的提交行为.

3.1.1 html代码

<body>
	<form action="2.jsp" method="post" id="myform">
		姓名:<input type="text" id="myname" /> <br />
		<input type="submit" value="提交" />
	</form>
</body>

3.1.2 Javascript代码

<script type="text/javascript">
	window.onload = function() {
		var myform = document.getElementById('myform');
		myform.onsubmit = function() {
			var myname = document.getElementById('myname').value;
			/*限制用户名的长度为5-10*/
			if (!(myname.length >= 5 && myname.length <= 10)) {
				alert("输入的用户名称长度,应该在5-10位");
				/*
				* 通过return false 阻止表单的提交
				 */
				return false;
			}
		}
	}
</script>