【翻譯作品】JavaScript DOM學習第八章：表單錯誤提示

文章目錄

• validate()
• writeError()
• removeError()

這一章詳細介紹的表單錯誤提示的方法比那種大多數使用警告框的方法要好的多。

在我看來，警告框只用在瀏覽器不支援其他顯示錯誤資訊的辦法的時候。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');
function validate() {validForm = true;firstError = null;errorstring = '';
這個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;}
對於不支援的瀏覽器，我們把表單項目的名稱和錯誤資訊儲存在errorstring裡面。這個字串會在最後彈出。也給他設定hasError屬性。
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的事件處理常式。
this.hasError = null;this.onchange = null;}
 
翻譯地址：http://www.quirksmode.org/dom/error.html