【翻译作品】JavaScript DOM学习第八章：表单错误提示

这一章详细介绍的表单错误提示的方法比那种大多数使用警告框的方法要好的多。在我看来，警告框只用在浏览器不支持其他显示错误信息的办法的时候。W3C建议我们在表单项的附近显示错误信息。这是一种很好的办法，所以我们只在浏览器不支持这种高级的办法的时候才使用警告对话框。

例子

试试下面的例子。每一项都是必须的。另外我会坚持email项是否有@符号。如果没有也会提示错误信息。

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

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

[/code]

validate()

我们假设表单是验证通过了的（validForm=true），我们设置firstError=null。最终我们会给第一个错误元素一个焦点。然后创建一个字符串：errorstring，这个包含所有的错误信息。这个只针对W3C DOM浏览器。

.elements]function validate() {
validForm = true;
firstError = null;
errorstring = '';

这个vlidate()函数的核心和平常的一样。按照你想的任何顺序检查错误。当你发现了一个错误，调用writeError()然后传递给他错误的表单项和错误信息。

如果浏览器不支持W3C DOM，那就用errorString生成一个警告框。你或许想修改一下警告框的内容。

function writeError(obj,message){

[/code]首先我们设置validForm为false：这个表单填写不正确，不应该被提交。

		obj.className += ' error';

[/code]接着给错误表单项设置一个onchange的事件处理程序：

var sp = document.createElement('span');sp.className = 'error';

[/code]给<span>添加一个错误信息的文本节点。

		obj.parentNode.appendChild(sp);

[/code]最终，给这个表单设置hasError属性。这个属性既可以用来说明有错误的表单项也可以方便将来移除错误信息。

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

[/code]如果这时候validForm的值还是true那么将firstError设置为现在的元素。以便于将来设置焦点。

function removeError() {this.className = this.className.substring(0,this.className.lastIndexOf(' '));

[/code]然后移除错误信息。hasError属性指向包含该信息的<span>，所以我们从表单项的父元素移除它。

	this.hasError = null;this.onchange = null;}

[/code]翻译地址：http://www.quirksmode.org/dom/error.html