在对一个表单(form)进行客户端检验的时候,我们已经习惯了<form onsubmit=”return check()”>这样的形式,如果表单没有通过验证,在check函数中return false就会阻止表单的提交了。
然而,如果要动态地为一个表单添加验证,即HTML代码中没有写onsubmit,而在页面加载后用javascript给这个form加一个handler,问题就来了。
假设我们已经得到了表单的DOM节点,保存在变量form中,一般这样来给它加上handler:
if (form.addEventListener) {
form.addEventListener(”submit”, check, false);
} else if (form.attachEvent) {
form.attachEvent(”onsubmit”, check);
但是这个check函数现在应该怎么写呢?验证失败时,仅仅写一个”return
false;”在Firefox中是不能阻止表单的提交的(在IE中可以),这就是为什么大家在onsubmit属性中要写”return
check()”,而不仅仅是”check()”。
请看ECMAScript Language Binding,其中明确地写着,event listener没有返回值。其实一切的根本都因为IE不支持DOM Level 2,大家都习惯了IE的return false,到了Firefox中也只是一个ugly的变通,而很少去注意正确的做法。
下面是一个可以被动态地attach(见上面的代码)的check函数:
function check() {
if (e && e.preventDefault) e.preventDefault();
return false;
}
在IE和Firefox中,它都可以被动态挂载为onsubmit的handler而且正常工作。
万恶的IE!