JavaScript DOM学习第八章表单错误提示

2024-05-06 14:11:29

字体：大中小

来源：转载

供稿：网友

在我看来，警告框只用在浏览器不支持其他显示错误信息的办法的时候。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(' '));

上一篇：javascript 定义新对象方法

下一篇：JavaScript DOM 学习第三章内容表格