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

2024-05-06 14:11:29

字體：大中小

供稿：網(wǎng)友

在我看來(lái)，警告框只用在瀏覽器不支持其他顯示錯(cuò)誤信息的辦法的時(shí)候。W3C建議我們?cè)诒韱雾?xiàng)的附近顯示錯(cuò)誤信息。這是一種很好的辦法，所以我們只在瀏覽器不支持這種高級(jí)的辦法的時(shí)候才使用警告對(duì)話框。
例子
試試下面的例子。每一項(xiàng)都是必須的。另外我會(huì)堅(jiān)持email項(xiàng)是否有@符號(hào)。如果沒(méi)有也會(huì)提示錯(cuò)誤信息。
代碼如下:
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(' '));

上一篇：javascript 定義新對(duì)象方法

下一篇：JavaScript DOM 學(xué)習(xí)第三章內(nèi)容表格