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

来源：互联网发布：labview编程样式编辑：程序博客网时间：2024/05/29 09:59

在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 0