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>