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

43 阅读 0 评论 29 点赞

我是靠谱客的博主高兴飞鸟，最近开发中收集的这篇文章主要介绍4、阻止表单onsubmit事件的默认行为，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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>