在我看來，警告框只用在浏覽器不支持其他顯示錯誤信息的辦法的時候。W3C建議我們在表單項的附近顯示錯誤信息。這是一種很好的辦法，所以我們只在浏覽器不支持這種高級的辦法的時候才使用警告對話框。
例子
試試下面的例子。每一項都是必須的。另外我會堅持email項是否有@符號。如果沒有也會提示錯誤信息。
復制代碼 代碼如下:
var W3CDOM = (document.getElementsByTagName && document.createElement);
window.onload = function () {
document.forms[0].onsubmit = function () {
return validate()
}
}
function validate() {
validForm = true;
firstError = null;
errorstring = '';
var x = document.forms[0].elements;
for (var i=0;i<x.length;i++) {
if (!x[i].value)
writeError(x[i],'This field is required');
}
if (x['email'].value.indexOf('@') == -1)
writeError(x['email'],'This is not a valid email address');
if (!W3CDOM)
alert(errorstring);
if (firstError)
firstError.focus();
if (validForm)
alert('All data is valid!');
return false;
}
function writeError(obj,message) {
validForm = false;
if (obj.hasError) return;
if (W3CDOM) {
obj.className += ' error';
obj.onchange = removeError;
var sp = document.createElement('span');
sp.className = 'error';
sp.appendChild(document.createTextNode(message));
obj.parentNode.appendChild(sp);
obj.hasError = sp;
}
else {
errorstring += obj.name + ': ' + message + '\n';
obj.hasError = true;
}
if (!firstError)
firstError = obj;
}
function removeError()
{
this.className = this.className.substring(0,this.className.lastIndexOf(' '));
this.parentNode.removeChild(this.hasError);
this.hasError = null;
this.onchange = null;
}
解釋
首先我們堅持是否支持W3C DOM。這個例子能夠在mac上的IE工作，但是如果在其他頁面上不能工作很正常。因為那個浏覽器對W3C DOM的支持還不夠，不能應對所有情況。
然後我們創建了onsubmit的事件處理程序，這個程序調用我們的驗證函數validation()。
復制代碼 代碼如下:
var W3CDOM = (document.getElementsByTagName && document.createElement);
window.onload = function () {
document.forms[0].onsubmit = function () {
return validate()
}
}
validate()
我們假設表單是驗證通過了的（validForm=true），我們設置firstError=null。最終我們會給第一個錯誤元素一個焦點。然後創建一個字符串：errorstring，這個包含所有的錯誤信息。這個只針對W3C DOM浏覽器。
復制代碼 代碼如下:
var x = document.forms[0].elements;
for (var i=0;i<x.length;i++) {
if (!x[i].value)
writeError(x[i],'This field is required');
}
if (x['email'].value.indexOf('@') == -1)
writeError(x['email'],'This is not a valid email address');
這個vlidate()函數的核心和平常的一樣。按照你想的任何順序檢查錯誤。當你發現了一個錯誤，調用writeError()然後傳遞給他錯誤的表單項和錯誤信息。
如果浏覽器不支持W3C DOM，那就用errorString生成一個警告框。你或許想修改一下警告框的內容。
復制代碼 代碼如下: if (!W3CDOM)
alert(errorstring);
為了給用戶方便，把焦點設置在第一個錯誤的元素上。
最後返回validaForm，如果還是true就提交表單，如果不是就停止提交。
writeError()
這個函數用來把錯誤信息輸出到表單項上。如果失敗，說明浏覽器不支持W3C DOM，然後就把錯誤信息發送到errorstring。
這個函數會傳遞一個表單項和一條錯誤信息。
復制代碼 代碼如下: function writeError(obj,message)
{
首先我們設置validForm為false：這個表單填寫不正確，不應該被提交。
復制代碼 代碼如下: validForm = false;
}
然後檢測表單項是否已經有了一個錯誤提示。如果有了，就返回到validation()函數，我可不想再同一項後面有兩個錯誤提示。
if (obj.hasError) return;檢查浏覽器是否支持W3C DOM：
復制代碼 代碼如下: obj.className += ' error';
接著給錯誤表單項設置一個onchange的事件處理程序：
復制代碼 代碼如下: obj.onchange = removeError;
創建一個<span>來裝在錯誤信息，並且設置它的類為"error"。在CSS裡面設置要呈現的樣式。
復制代碼 代碼如下: var sp = document.createElement('span');
sp.className = 'error';
給<span>添加一個錯誤信息的文本節點。
復制代碼 代碼如下: sp.appendChild(document.createTextNode(message));
然後把這個<span>添加到相應的表單項後買（在這個例子中，每個表單項都有一個<p>標簽）。
復制代碼 代碼如下: obj.parentNode.appendChild(sp);
最終，給這個表單設置hasError屬性。這個屬性既可以用來說明有錯誤的表單項也可以方便將來移除錯誤信息。
復制代碼 代碼如下: obj.hasError = sp; 2 }
對於不支持的浏覽器，我們把表單項目的名稱和錯誤信息保存在errorstring裡面。這個字符串會在最後彈出。也給他設置hasError屬性。
[code] else {
errorstring += obj.name + ': ' + message + '\n';
obj.hasError = true;
}
如果這時候validForm的值還是true那麼將firstError設置為現在的元素。以便於將來設置焦點。
復制代碼 代碼如下: if (validForm)
firstError = obj;
removeError()
每一個錯誤表單項的onchange的事件處理程序都指向這個函數。如果用戶修改了相應的表單項，我們禮貌的假設錯誤已經修正了。因此錯誤信息應該消失。
首先移除表單項的類中的error項。這個用來移除特別的錯誤樣式。
復制代碼 代碼如下: function removeError() {
this.className = this.className.substring(0,this.className.lastIndexOf(' '));
然後移除錯誤信息。hasError屬性指向包含該信息的<span>，所以我們從表單項的父元素移除它。
復制代碼 代碼如下: this.parentNode.removeChild(this.hasError);
最後再做一些清理。設置hasError屬性為null，然後移除onchange的事件處理程序。
[code]this.hasError = null;
this.onchange = null;
}
翻譯地址：http://www.quirksmode.org/dom/error.html
轉載請保留以下信息
作者：北玉(tw:@rehawk)