JavaScript 表单验证与 DOM 访问详解

JavaScript 表单验证概述与局限性

由于每个表单的校验规则各不相同，无法提供通用的代码模板。你需要利用本章介绍的各类元素构建专属的检测函数。后续章节还将提供具体示例供参考。

本章将首先探讨使用 JavaScript 进行表单检测的局限性，随后解释提交事件处理程序，接着介绍表单本身的方法和属性，最后讲解如何访问表单元素。

此外，Jeff Howden 撰写的《Forms & JavaScript Living Together in Harmony》一文也介绍了表单使用的常见错误及解决方案。关于局限性，首先需要明确用户提交表单后 JavaScript 检测代码的行为： 1. JavaScript 在检测表单时，若发现错误，提交动作将暂停，并向用户弹出警告提示输入正确数据。 2. 若无错误或 JavaScript 已禁用，表单内容将发送至服务器端。 3. 若服务器端脚本发现错误，会返回错误信息。此时用户需返回表单重新填写并提交。 4. 若无错误，服务器端完成必要工作并显示感谢信息。 如上所述，数据在提交过程中会经过两次检测：一次由 JavaScript 执行，另一次由服务器端执行。服务器端检测始终可行且可靠。JavaScript 检测仅在用户启用 JavaScript 功能时有效。既然服务器端检测既可靠又兼容所有浏览器，为何仍需 JavaScript 检测？ JavaScript 检测是服务器端检测的有效补充，因为它能在数据发送至服务器前预先检测。这样用户无需使用后退按钮返回修改表单，避免了寻找填错内容的繁琐过程。因此，JavaScript 检测对用户的使用体验帮助更大。虽然 JavaScript 并非完整的检测机制，但作为服务器端的补充及提升用户友好性，它仍是一个不错的选择。建议同时使用这两种检测机制，既满足用户体验要求，又保证程序安全性。

 
<form action="something.pl" onsubmit="return checkscript()">

checkscript() 即为该处理函数的名称。此函数需返回 true 或 false。若返回 false，表单将不会被提交；无论返回 true 还是 false，代码执行均会停止。

因此生成的代码如下：

 
function checkscript() {
if (some value is/is not something) {
// something is wrong
alert('alert user of problem');
return false;
    } 
else if (another value is/is not something) {
// something else is wrong
alert('alert user of problem');
return false;
    } 
// If the script makes it to here, everything is OK,
// so you can submit the form
return true;
} 

当然，这段代码可以编写得相当复杂，特别是当需要检测大量表单项目或众多单选框时。其基本思想是：遍历表单中每一个需要检查的元素，若发现错误则返回 false，代码随即停止运行，表单也不会被提交。

当发现错误时，应提醒用户。虽然可以使用警告框，但现代做法通常是生成一条错误信息并将其添加在错误条目之后。

只有在最后检查完所有元素且未发现错误的情况下，才返回 true，此时表单将被提交。

表单的方法与属性操作

表单的方法和属性

JavaScript 还提供了一些用于处理表单的内建方法和属性，其中三个较为重要：

你可以使用 submit() 方法来提交表单。对于页面中的第一个表单，可以编写如下代码：

document.forms[0].submit()
请注意，当用户使用 JavaScript 提交表单时，表单的事件处理程序将不起作用。
若要重置表单，你可以：
[code] document.forms[0].reset()
我假设（未经测试），如果使用此方法，重置表单的事件处理程序也不会执行。
最后，你可以修改表单的 ACTION 属性：
[code] document.forms[0].action = 'the_other_script.pl';
当表单在某些情况下需要提交到其他页面时，此方法相当方便。
通过 DOM 访问表单元素访问表单元素
表单的有效性检测需要访问表单元素以知晓用户填写的内容。因此，首先我们需要根据 Level 0 DOM 来访问表单。通常写法如下：
[code] document.forms[number].elements[number]
页面加载后，JavaScript 会生成一个 forms 数组来存储页面上所有的表单。因此，第一个表单为 forms[0]，第二个为 forms[1]，依此类推。
JavaScript 将表单内的每个元素也存储进一个数组。第一个元素为 elements[0]，第二个为 elements[1]。所有的 input、select、textarea 均被视为元素。
有时，使用表单和元素的 name 属性更为便捷。在 HTML 中，你需要为每个元素命名，例如：
[code] <form name="personal" action="something.pl" onsubmit="return checkscript()"> 2 <input type=text size=20 name=name> 3 <input type=text size=20 name=address> 4 <input type=text size=20 name=city> 5 </form>
现在你可以通过以下方法访问元素：
[code] document.personal.name 2 document.personal.address 3 document.personal.city
使用 name 的好处在于，即使打乱页面中所有元素的顺序，代码仍能正常运行；若使用数组则不行。例如，上述例子中的 city 输入框为 document.forms[0].elements[2]，但当你将其置于首位时，它变为 document.forms[0].element[0]，此时你就必须修改代码。
表单元素值的检测与处理值的检测
当然，最重要的事情是找出用户填写的值或选中的复选框。有时你还希望在表单中填写其他信息。
以下小段代码可帮助你访问表单中的元素。所有示例均将用户输入保存在 user_input 变量中。之后，你就可以检测其有效性了。
Texts，textarea和隐藏的字段
非常简单：
[code] user_input = document.forms[0].text.value

其中 text 即为文本框、textarea 或隐藏字段的 name。value 属性将给出这些元素的文本，并存储在 user_input 中。

直接赋值也可以：

document.forms[0].text.value = 'The new value';

Select Boxes

这也很简单：

user_input = document.forms[0].select.value;

若要更改其选择项目，必须修改 selectedIndex，例如：

document.forms[0].select.selectedIndex = 2;

现在第三个选项即被选中。

旧的浏览器

在旧版浏览器中，select boxes 没有 value 属性，因此：

 
var selectBox = document.forms[0].select;
user_input = selectBox.options[selectBox.selectedIndex].value

首先找出用户选择的项目。document.forms[0].select.selectedIndex 给出了所选项目的编号。JavaScript 已创建一个包含所有 select boxes 选项的 options 数组。因此，通过该数组即可得知用户选择了什么，并存储在 user_input 中。

checkboxes

checkboxes 略有不同。我们已知其值，但需知晓用户是否选中了它。checked 属性可告知这一点，它具有 true 和 false 两个值。

因此：

 
if (document.forms[0].checkbox.checked) {
user_input = document.forms[0].checkbox.name
} 

checkbox 是复选框的名字。若复选框被选中，我们获取其名字（也可选择获取值）并传递给 user_input。

选中一个复选框可以：

document.forms[0].checkbox.checked = true

单选框

不幸的是，你无法直接找到哪个单选框被选中。只能在遍历后查找 checked 属性为 true 的那一项。

 
for (i=0;i<document.forms[0].radios.length;i++) {
if (document.forms[0].radios[i].checked) {
user_input = document.forms[0].radios[i].value;
} 
} 

radios 即为这一组单选框的名字。

注意 document.forms[0].radios 是包含所有单选框的数组，循环检测是否 checked 的属性为 true。若是则传递给 user_input。

document.forms[0].radios.length 返回所有单选框的数目。

若选择一个单选框，我们可以设置它的 checked 值为 true：

document.forms[0].radios[i].checked = true;

翻译地址：http://www.quirksmode.org/js/forms.html

转载请保留以下信息

作者：北玉(tw:@rehawk)