|
|
例子
試試下面的例子。每一項都是必須的。另外我會堅持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)
JavaScript技術：JavaScript DOM學習第八章 表單錯誤提示，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
