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

来源：互联网发布：汽车app软件下载编辑：程序博客网时间：2024/04/20 10:27

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>

1 0