在對一個表單(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!