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

核心提示：在我看来，警告框只用在浏览器不支持其他显示错误信息的办法的时候，JavaScript DOM学习第八章：表单错误提示，W3C建议我们在表单项的附近显示错误信息，这是一种很好的办法，每一项都是必须的，另外我会坚持email项是否有@符号，所以我们只在浏览器不支持这种高级的办法的时候才使用警告对话框，例子试试下面的例子

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

例子

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

01　var　W3CDOM　=　(document.getElementsByTagName　&&　document.createElement);
02　　
03　window.onload　=　function　()　{
04　　　　　document.forms[0].onsubmit　=　function　()　{
05　　　　　　　　　return　validate()
06　　　　　}
07　}
08　　
09　function　validate()　{
10　　　　　validForm　=　true;
11　　　　　firstError　=　null;
12　　　　　errorstring　=　'';
13　　　　　var　x　=　document.forms[0].elements;
14　　　　　for　(var　i=0;i<x.length;i++)　{
15　　　　　　　　　if　(!x[i].value)
16　　　　　　　　　　　　　writeError(x[i],'This　field　is　required');
17　　　　　}
18　　　　　if　(x['email'].value.indexOf('@')　==　-1)
19　　　　　　　　　writeError(x['email'],'This　is　not　a　valid　email　address');
20　　　　　if　(!W3CDOM)
21　　　　　　　　　alert(errorstring);
22　　　　　if　(firstError)
23　　　　　　　　　firstError.focus();
24　　　　　if　(validForm)
25　　　　　　　　　alert('All　data　is　valid!');
26　　　　　return　false;
27　}
28　　
29　function　writeError(obj,message)　{
30　　　　　validForm　=　false;
31　　　　　if　(obj.hasError)　return;
32　　　　　if　(W3CDOM)　{
33　　　　　　　　　obj.className　+=　'　error';
34　　　　　　　　　obj.onchange　=　removeError;
35　　　　　　　　　var　sp　=　document.createElement('span');
36　　　　　　　　　sp.className　=　'error';
37　　　　　　　　　sp.appendChild(document.createTextNode(message));
38　　　　　　　　　obj.parentNode.appendChild(sp);
39　　　　　　　　　obj.hasError　=　sp;
40　　　　　}
41　　　　　else　{
42　　　　　　　　　errorstring　+=　obj.name　+　':　'　+　message　+　'\n';
43　　　　　　　　　obj.hasError　=　true;
44　　　　　}
45　　　　　if　(!firstError)
46　　　　　　　　　firstError　=　obj;
47　}
48　　
49　function　removeError()
50　{
51　　　　　this.className　=　this.className.substring(0,this.className.lastIndexOf('　'));
52　　　　　this.parentNode.removeChild(this.hasError);
53　　　　　this.hasError　=　null;
54　　　　　this.onchange　=　null;
55　}

编缉推荐阅读以下文章

• JavaScript DOM学习第九章：选取范围的介绍
• JavaScript DOM学习第七章：表单的扩展
• JavaScript DOM学习第六章：表单实例
• JavaScript DOM学习第五章：表单简介
• JavaScript DOM学习第四章：getElementByTagNames
• JavaScript DOM学习第三章：内容表格
• JavaScript DOM学习第二章：编辑文本
• JavaScript DOM学习第一章：W3C DOM简介
• javaScript DOM方法与属性摘要