亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript DOM學(xué)習(xí)第八章 表單錯誤提示

 更新時間：2010年02月19日 13:53:39   作者：  
這一章詳細(xì)介紹的表單錯誤提示的方法比那種大多數(shù)使用警告框的方法要好的多。
在我看來，警告框只用在瀏覽器不支持其他顯示錯誤信息的辦法的時候。W3C建議我們在表單項的附近顯示錯誤信息。這是一種很好的辦法，所以我們只在瀏覽器不支持這種高級的辦法的時候才使用警告對話框。
例子
試試下面的例子。每一項都是必須的。另外我會堅持email項是否有@符號。如果沒有也會提示錯誤信息。
復(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;
}

解釋
首先我們堅持是否支持W3C DOM。這個例子能夠在mac上的IE工作，但是如果在其他頁面上不能工作很正常。因為那個瀏覽器對W3C DOM的支持還不夠，不能應(yīng)對所有情況。

然后我們創(chuàng)建了onsubmit的事件處理程序，這個程序調(diào)用我們的驗證函數(shù)validation()。

復(fù)制代碼 代碼如下:

var W3CDOM = (document.getElementsByTagName && document.createElement);

window.onload = function () {
    document.forms[0].onsubmit = function ()    {
        return validate()
    }
}

validate()
我們假設(shè)表單是驗證通過了的（validForm=true），我們設(shè)置firstError=null。最終我們會給第一個錯誤元素一個焦點。然后創(chuàng)建一個字符串：errorstring，這個包含所有的錯誤信息。這個只針對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');

這個vlidate()函數(shù)的核心和平常的一樣。按照你想的任何順序檢查錯誤。當(dāng)你發(fā)現(xiàn)了一個錯誤，調(diào)用writeError()然后傳遞給他錯誤的表單項和錯誤信息。

如果瀏覽器不支持W3C DOM，那就用errorString生成一個警告框。你或許想修改一下警告框的內(nèi)容。

復(fù)制代碼 代碼如下:
if (!W3CDOM)
alert(errorstring);

為了給用戶方便，把焦點設(shè)置在第一個錯誤的元素上。

最后返回validaForm，如果還是true就提交表單，如果不是就停止提交。

writeError()
這個函數(shù)用來把錯誤信息輸出到表單項上。如果失敗，說明瀏覽器不支持W3C DOM，然后就把錯誤信息發(fā)送到errorstring。
這個函數(shù)會傳遞一個表單項和一條錯誤信息。

復(fù)制代碼 代碼如下:
function writeError(obj,message)
{

首先我們設(shè)置validForm為false：這個表單填寫不正確，不應(yīng)該被提交。

復(fù)制代碼 代碼如下:
validForm = false;
}

然后檢測表單項是否已經(jīng)有了一個錯誤提示。如果有了，就返回到validation()函數(shù)，我可不想再同一項后面有兩個錯誤提示。

    if (obj.hasError) return;檢查瀏覽器是否支持W3C DOM：

復(fù)制代碼 代碼如下:
obj.className += ' error';

接著給錯誤表單項設(shè)置一個onchange的事件處理程序：

復(fù)制代碼 代碼如下:
obj.onchange = removeError;

創(chuàng)建一個<span>來裝在錯誤信息，并且設(shè)置它的類為"error"。在CSS里面設(shè)置要呈現(xiàn)的樣式。

復(fù)制代碼 代碼如下:
var sp = document.createElement('span');
sp.className = 'error';

給<span>添加一個錯誤信息的文本節(jié)點。

復(fù)制代碼 代碼如下:
sp.appendChild(document.createTextNode(message));

然后把這個<span>添加到相應(yīng)的表單項后買（在這個例子中，每個表單項都有一個<p>標(biāo)簽）。

復(fù)制代碼 代碼如下:
obj.parentNode.appendChild(sp);

最終，給這個表單設(shè)置hasError屬性。這個屬性既可以用來說明有錯誤的表單項也可以方便將來移除錯誤信息。

復(fù)制代碼 代碼如下:
obj.hasError = sp; 2 }
對于不支持的瀏覽器，我們把表單項目的名稱和錯誤信息保存在errorstring里面。這個字符串會在最后彈出。也給他設(shè)置hasError屬性。

[code] else {
errorstring += obj.name + ': ' + message + '\n';
obj.hasError = true;
}

如果這時候validForm的值還是true那么將firstError設(shè)置為現(xiàn)在的元素。以便于將來設(shè)置焦點。

復(fù)制代碼 代碼如下:
if (validForm)
firstError = obj;
removeError()

每一個錯誤表單項的onchange的事件處理程序都指向這個函數(shù)。如果用戶修改了相應(yīng)的表單項，我們禮貌的假設(shè)錯誤已經(jīng)修正了。因此錯誤信息應(yīng)該消失。

首先移除表單項的類中的error項。這個用來移除特別的錯誤樣式。

復(fù)制代碼 代碼如下:
function removeError() {
this.className = this.className.substring(0,this.className.lastIndexOf(' '));

然后移除錯誤信息。hasError屬性指向包含該信息的<span>，所以我們從表單項的父元素移除它。

復(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)載請保留以下信息
作者：北玉(tw:@rehawk)

相關(guān)文章

最新評論