js验证阻止表单提交(表单绑定onsubmit事件)
2014-07-15 15:22
816 查看
原始方式:
大多数情况我们需要行为和结构分离,所以我们在html代码中加onclick代码是不合适的,解决方案:
再看看dom2级事件绑定:
但是我们测试的时候我们会发现IE下能够阻止表单提交,但是FF、chrome等浏览器并不能阻止表单提交
原因是:Object EventListener:This is an ECMAScript function reference. This method has no return value. The parameter is a Event object.
可见,listener是没有返回值的(写了也不会认),因此我们的check函数的返回值是不起作用的。
解决方案:
<form action="http://www.cnblogs.com/zixueit/" onsubmit="return check()"> <input type="submit" value="提交" /> </form> <script type="text/javascript"> function check(){ if(!confirm('确定?')){ return false; } } </script>
大多数情况我们需要行为和结构分离,所以我们在html代码中加onclick代码是不合适的,解决方案:
//dom0级事件绑定 <form action="http://www.cnblogs.com/zixueit/"> <input type="submit" value="提交" /> </form> <script type="text/javascript"> onload = function(){ myform = document.getElementsByTagName('form')[0]; myform.onsubmit= function(){ if(!confirm('你确定?')){ return false; } } } </script>
再看看dom2级事件绑定:
myform = document.getElementsByTagName('form')[0]; if (myform.addEventListener) { myform.addEventListener('submit', check, false); } else {//for ie myform.attachEvent("onsubmit", check); } function check(){ if(!confirm('确定?')){ return false; } }
但是我们测试的时候我们会发现IE下能够阻止表单提交,但是FF、chrome等浏览器并不能阻止表单提交
原因是:Object EventListener:This is an ECMAScript function reference. This method has no return value. The parameter is a Event object.
可见,listener是没有返回值的(写了也不会认),因此我们的check函数的返回值是不起作用的。
解决方案:
function check(ev) { if (!confirm('确定?')) {//验证出错的情况just a demo ev = ev || window.event; // Event对象 if (ev.preventDefault) { // 标准浏览器 ev.preventDefault(); } else { // IE浏览器 window.event.returnValue = false; } } }
相关文章推荐
- JS实现表单内容验证、阻止表单提交(onsubmit)
- JS中对于form表单提交时验证form的onsubmit函数与submit类型按钮的onclick函数
- 有关onsubmit return false 阻止form表单提交:js
- form的onsubmit事件--表单提交前的验证最佳实现方式
- form的onsubmit事件--表单提交前的验证
- onsubmit="return check() 给form加onsubmit 验证所有表单后再提交,可以用返回false 来阻止submit提交
- form的onsubmit事件--表单提交前的验证最佳实现方式
- form的onsubmit事件--表单提交前的验证最佳实现方式
- onsubmit="return check() 给form加onsubmit 验证所有表单后再提交,可以用返回false 来阻止submit提交
- form的onsubmit事件--表单提交前的验证最佳实现方式
- form的onsubmit事件--表单提交前的验证最佳实现方式
- form的onsubmit事件--表单提交前的验证最佳实现方式
- form的onsubmit事件--表单提交前的验证最佳实现方式
- form的onsubmit事件--表单提交前的验证最佳实现方式(
- form的onsubmit事件--表单提交前的验证实现方式
- form的onsubmit事件--表单提交前的验证最佳实现方式
- form的onsubmit事件--表单提交前的验证最佳实现方式
- 使用onsubmit()验证表单并阻止非法提交(使用jQuery)
- form的onsubmit事件--表单提交前的验证最佳实现方式
- Form onsubmit 事件 阻止表单提交() 必须选中同意选项才可以提交