起因
今天在公司忙活着一个项目，涉及到表单提交，要求在表单提交之前判断几个input的值是否为空，如果是，则阻止表单提交。
我的做法是给form添加了一个submit事件绑定，然后判断，如果有input的值为空则return false 阻止提交。判断input值是否为空，这一块走的正常，可是在判断有空值的时候，表单还是提交了，很是奇怪。
上网看了看大家的一些做法，也都是return false.为啥到我这边就不管用了？后来仔细看了下别人代码和自己的区别，这才找到了原因。
表单提交前判断的常用做法
一般来说，js要实现提交前的判断，有以下三种常见做法：
- 监听form标签的submit事件
- 监听input[type=submit]按钮的click事件
- 监听input[type=button]或者任何指定作为提交按钮的标签的任意事件，在条件符合之后调用form标签的submit()方法
一下是一个简单的例子：
对于第三种方法，实现阻止表单提交最简单，只要条件不符合就不调用form标签的submit()方法即可
btn.addEventListener('click',function(e){
if(checkIsNull()){
form1.submit();
}else{
alert('文本框内容不能为空');
}
});
对于第二种方法和第一种方法，就有比较多的可能性了
直接绑定到标签属性上
如果是使用直接绑定到标签属性上的方法，则第一和第二种方法都可以简单的使用return false;的方法去阻止表单提交。
form1.onsubmit = function(e){
if(checkIsNull()){
return true;
}else{
alert('文本框内容不能为空');
return false;
}
};
sbtn.onclick = function(e){
if(checkIsNull()){
return true;
}else{
alert('文本框内容不能为空');
return false;
}
};
这种直接注册到标签属性上的方法，方法内部的return false;就会直接作用到整个事件上，这一点我是在下面这个文章里面看到的，有兴趣的同学可以看看，传送门：由表单中onsubmit=”return false;”想到的
可是这种事件注册有个缺点就是没有办法给同一个标签的同一个事件注册多个回调函数函数，这个在某些情况下还是不行的。然后就是通过addEventListener(IE下面是attachEvent)
通过addEventListener/attachEvent注册事件
通过addEventListener方法注册的事件的回调函数，假设是:
form.addeventListener(‘submit’,function doSubmit(e){
return false;
},false);
其实就类似于：
form.onsubmit = function(e){
doSubmit();
}
所以doSubmit()内部的return false;是没办法影响到整个事件的浏览器默认动作
这个时候，在非IE浏览器下，回调函数函数可以通过传入的event，调用该event对象的preventDefault()方法阻止浏览器的默认动作；如果是在IE浏览器下，则是通过window.event.returnValue = false;方法来阻止浏览器的默认动作。（这段内容参考的网站，传送门：js阻止浏览器的默认行为以及停止事件冒泡（用JQuery实现回车提交，兼容IE、FF浏览器）） 所以可行的代码如下：
function doSubmit(e){
if(checkIsNull()){
return true;
}else{
alert('文本框内容不能为空');
//如果提供了事件对象，则这是一个非IE浏览器
if(e && e.preventDefault){
//阻止默认浏览器动作(W3C)
e.preventDefault();
}else{
//IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
}
}
// 判断是否支持IE的注册事件方法，如果支持则是IE浏览器，使用attachEvent进行事件注册
if(sbtn.attachEvent){
// attachEvent不支持捕捉，所以只有两个参数
sbtn.attachEvent('click',doSubmit)
}else{
sbtn.addEventListener('click',duSubmit,false);
}
form标签的submit事件也是类似的，就不重复写了
总结
return false;是能够阻止表单提交的，不过只能针对直接注册事件到标签属性上面的情况。对于addEventListener/attachEvent注册的事件，则需要通过event.preventDefaule()或window.event.returnValue=false的方式阻止表单的提交。针对其他浏览器默认行为，也大体上类似
