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

这一章详细介绍的表单错误提示的方法比那种大多数使用警告框的方法要好的多。

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

 

解释

首先我们坚持是否支持W3C DOM。这个例子能够在mac上的IE工作，但是如果在其他页面上不能工作很正常。因为那个浏览器对W3C DOM的支持还不够，不能应对所有情况。

然后我们创建了onsubmit的事件处理程序，这个程序调用我们的验证函数validation()。

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

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

validate()

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

	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');

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

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

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

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

对于不支持的浏览器，我们把表单项目的名称和错误信息保存在errorstring里面。这个字符串会在最后弹出。也给他设置hasError属性。

	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的事件处理程序。

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

 

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