|
|
例子
試試下面的例子。每一項(xiàng)都是必須的。另外我會(huì)堅(jiān)持email項(xiàng)是否有@符號(hào)。如果沒(méi)有也會(huì)提示錯(cuò)誤信息。
復(fù)制代碼 代碼如下:
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;
}
解釋
首先我們堅(jiān)持是否支持W3C DOM。這個(gè)例子能夠在mac上的IE工作，但是如果在其他頁(yè)面上不能工作很正常。因?yàn)槟莻€(gè)瀏覽器對(duì)W3C DOM的支持還不夠，不能應(yīng)對(duì)所有情況。
然后我們創(chuàng)建了onsubmit的事件處理程序，這個(gè)程序調(diào)用我們的驗(yàn)證函數(shù)validation()。
復(fù)制代碼 代碼如下:
var W3CDOM = (document.getElementsByTagName && document.createElement);
window.onload = function () {
document.forms[0].onsubmit = function () {
return validate()
}
}
validate()
我們假設(shè)表單是驗(yàn)證通過(guò)了的（validForm=true），我們?cè)O(shè)置firstError=null。最終我們會(huì)給第一個(gè)錯(cuò)誤元素一個(gè)焦點(diǎn)。然后創(chuàng)建一個(gè)字符串：errorstring，這個(gè)包含所有的錯(cuò)誤信息。這個(gè)只針對(duì)W3C DOM瀏覽器。
復(fù)制代碼 代碼如下:
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');
這個(gè)vlidate()函數(shù)的核心和平常的一樣。按照你想的任何順序檢查錯(cuò)誤。當(dāng)你發(fā)現(xiàn)了一個(gè)錯(cuò)誤，調(diào)用writeError()然后傳遞給他錯(cuò)誤的表單項(xiàng)和錯(cuò)誤信息。
如果瀏覽器不支持W3C DOM，那就用errorString生成一個(gè)警告框。你或許想修改一下警告框的內(nèi)容。
復(fù)制代碼 代碼如下: if (!W3CDOM)
alert(errorstring);
為了給用戶方便，把焦點(diǎn)設(shè)置在第一個(gè)錯(cuò)誤的元素上。
最后返回validaForm，如果還是true就提交表單，如果不是就停止提交。
writeError()
這個(gè)函數(shù)用來(lái)把錯(cuò)誤信息輸出到表單項(xiàng)上。如果失敗，說(shuō)明瀏覽器不支持W3C DOM，然后就把錯(cuò)誤信息發(fā)送到errorstring。
這個(gè)函數(shù)會(huì)傳遞一個(gè)表單項(xiàng)和一條錯(cuò)誤信息。
復(fù)制代碼 代碼如下: function writeError(obj,message)
{
首先我們?cè)O(shè)置validForm為false：這個(gè)表單填寫(xiě)不正確，不應(yīng)該被提交。
復(fù)制代碼 代碼如下: validForm = false;
}
然后檢測(cè)表單項(xiàng)是否已經(jīng)有了一個(gè)錯(cuò)誤提示。如果有了，就返回到validation()函數(shù)，我可不想再同一項(xiàng)后面有兩個(gè)錯(cuò)誤提示。
if (obj.hasError) return;檢查瀏覽器是否支持W3C DOM：
復(fù)制代碼 代碼如下: obj.className += ' error';
接著給錯(cuò)誤表單項(xiàng)設(shè)置一個(gè)onchange的事件處理程序：
復(fù)制代碼 代碼如下: obj.onchange = removeError;
創(chuàng)建一個(gè)<span>來(lái)裝在錯(cuò)誤信息，并且設(shè)置它的類為"error"。在CSS里面設(shè)置要呈現(xiàn)的樣式。
復(fù)制代碼 代碼如下: var sp = document.createElement('span');
sp.className = 'error';
給<span>添加一個(gè)錯(cuò)誤信息的文本節(jié)點(diǎn)。
復(fù)制代碼 代碼如下: sp.appendChild(document.createTextNode(message));
然后把這個(gè)<span>添加到相應(yīng)的表單項(xiàng)后買(mǎi)（在這個(gè)例子中，每個(gè)表單項(xiàng)都有一個(gè)<p>標(biāo)簽）。
復(fù)制代碼 代碼如下: obj.parentNode.appendChild(sp);
最終，給這個(gè)表單設(shè)置hasError屬性。這個(gè)屬性既可以用來(lái)說(shuō)明有錯(cuò)誤的表單項(xiàng)也可以方便將來(lái)移除錯(cuò)誤信息。
復(fù)制代碼 代碼如下: obj.hasError = sp; 2 }
對(duì)于不支持的瀏覽器，我們把表單項(xiàng)目的名稱和錯(cuò)誤信息保存在errorstring里面。這個(gè)字符串會(huì)在最后彈出。也給他設(shè)置hasError屬性。
[code] else {
errorstring += obj.name + ': ' + message + '/n';
obj.hasError = true;
}
如果這時(shí)候validForm的值還是true那么將firstError設(shè)置為現(xiàn)在的元素。以便于將來(lái)設(shè)置焦點(diǎn)。
復(fù)制代碼 代碼如下: if (validForm)
firstError = obj;
removeError()
每一個(gè)錯(cuò)誤表單項(xiàng)的onchange的事件處理程序都指向這個(gè)函數(shù)。如果用戶修改了相應(yīng)的表單項(xiàng)，我們禮貌的假設(shè)錯(cuò)誤已經(jīng)修正了。因此錯(cuò)誤信息應(yīng)該消失。
首先移除表單項(xiàng)的類中的error項(xiàng)。這個(gè)用來(lái)移除特別的錯(cuò)誤樣式。
復(fù)制代碼 代碼如下: function removeError() {
this.className = this.className.substring(0,this.className.lastIndexOf(' '));
然后移除錯(cuò)誤信息。hasError屬性指向包含該信息的<span>，所以我們從表單項(xiàng)的父元素移除它。
復(fù)制代碼 代碼如下: this.parentNode.removeChild(this.hasError);
最后再做一些清理。設(shè)置hasError屬性為null，然后移除onchange的事件處理程序。
[code]this.hasError = null;
this.onchange = null;
}
翻譯地址：http://www.quirksmode.org/dom/error.html
轉(zhuǎn)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)
JavaScript技術(shù)：JavaScript DOM學(xué)習(xí)第八章 表單錯(cuò)誤提示，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
