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

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;
}

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdspyw.html