表单脚本的基础知识

本文是对 JavaScript 高级程序设计 一书中相关章节的整理，加上自己的理解

1. 属性和方法

在 HTML 中，表单是由 <form> 元素来表示的，在 JavaScript 中，它与其他 HTML 元素具有相同的默认属性。不过它也有自己独有的属性和方法。

属性/方法	说明
method	要发送的 HTTP 请求类型，通常是“get”或“post”
action	接受请求的 URL
name	表单的名称，主要用于 `document.forms.name` 获取表单来用
elements	表单中所有控件的集合（HTMLCollection 集合）（input、fieldset、select、textarea 等）
length	表单中控件的数量（等于 elements.length）
enctype	请求编码的类型
acceptCharset	服务器能够处理的字符串
target	用于发送请求和接收响应的窗口名称
autocomplete	on/off 表示是否在输入时出现候选框
reset()	将所有表单域重置为默认值
submit()	提交表单

2. 获取表单

通过 getElementById() 获取

// 取得页面中 id 为 'form1' 的表单
var form = getElementById("form1");

通过 document.forms 获取页面中所有的表单的一个集合，然后通过数字索引或 name 值来取得特定的表单

// 取得页面中所有表单中的第一个表单
var firstForm = document.forms[0];
// 取得页面中所有表单中 name 值为 'form2' 的表单
var myForm = document.forms["form2"];

3. 提交表单

用户单击提交按钮或图像按钮时，就会提交表单。

3.1 提交按钮

使用 <input> 或 <button> 可以定义提交按钮，只要将 type 值设置为 “submit” 即可。

<!-- 通用提交按钮 -->
<input type = "submit" value = "Submit!">
<!-- 自定义提交按钮 -->
<button type = "submit">Submit!</button>

3.2 图像按钮

图像按钮是通过将 <input> 的 type 特性值设置为 “image” 来定义。

<!-- 图像按钮 -->
<input type = "image" src = "#">

3.3 提交前验证

通过按钮的方式提交表单时，浏览器会在将请求发送到服务器之前触发 submit 事件。这样我们就可以有机会通过这个事件的处理程序验证表单，并根据验证的结果来决定是否提交表单。（阻止这个事件的默认行为就可以取消表单的提交）

var form = document.getElementById("form1");
function isFilled(whichelement) {
   return (whichelement.value.replace(" ", "").length === 0 &&
          whichelement.value !== whichelement.placeholder);
}
function isEmail(whichelement) {
   return (whichelement.value.indexOf("@") !== -1 &&
          whichelement.value.indexOf(".") !== -1);
}
function validateForm(whichform) {
   for (var i = 0; i < whichform.elements.length; i++) {
      var elem = whichform.elements[i];
      if (elem.required === "required") {
         if (!isFilled(elem)) {
            alert("Please fill in the " + elem.name + " filled.");
            return false;
         }
      }
      if (elem.type === "email") {
         if (!isEmail(elem)) {
            alert("The " + elem.name +
                  " field must be a valid email address.");
            return false;
         }
      }
   }
   return true;
}
EventUtil.addHandler(form, "submit", function(event) {
   event = EventUtil.getEvent(event);
   // 验证后看是否要取消提交的默认行为
   if (!validateForm(this)) {
      EventUtil.preventDefault(event);
   }
});

上面的代码为表单的 submit 事件添加了一个处理程序，经历一系列的验证后，如果没有通过验证则取消提交。注意，这里的 submit 事件要注册到表单元素（<form>）上。
其中，添加事件处理程序的方法为前面文章中跨浏览器的解决方案。

3.4 编程方式提交

这种方式无需表单包含提交按钮，任何时候都可以正常提交表单：

var form = document.getElementById("myForm");
//提交表单
form.submit();

这种方法提交表单，不会触发 submit 事件，因此就记得在调用此方式前先验证表单数据。

3.5 提交表单的问题

提交表单可能出现的最大问题可能是 用户重复提交，两个解决方案：

在第一次提交表单后就禁用提交按钮

var subBtn = document.getElementById("myBtn");
EventUtil(subBtn, "click", function() {
   this.disabled = true;
});

取消后续的表单提交操作

var form = document.getElementById("form1");
var flag = false;
// 为表单注册一个 submit 事件，点击提交按钮时会触发
EventUtil.addHandler(form, "submit", function(event) {
   event = EventUtil.getEvent(event);
   // 如果 flag 值变为 true（提交一次后会变），取消提交操作
   if (flag) {
      EventUtil.preventDefault(event);
   }
   flag = true;
});

4. 重置表单

4.1 重置按钮

<!-- 通用重置按钮 -->
<input type = "reset" value = "Reset form">
<!-- 自定义重置按钮 -->
<button type = "reset">Reset form</button>

这两个按钮都可以用来重置表单。在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。

4.2 重置前验证

用户单击重置按钮重置表单时，会像单击提交按钮触发 submit 事件那样触发 reset 事件。利用这个机会，我们可以在重置表单之前进行验证，在必要时取消重置。

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});

4.3 编程方式重置

与提交表单一样，也可以通过 JavaScript 来重置表单，如下：

var form = document.getElementById("form1");
// 重置表单
form.reset();

与调用 submit 方法不同的是，调用 reset 方法会向单击重置按钮一样触发 reset 事件。

5. 获取表单控件（表单字段）

通过 form.elements 获取当前表单中所有的控件，然后根据数据索引值或 name 值来获取特定的控件

// 取得页面中 id 为 'form1' 的表单
var form = getElementById("form1");
// 获取当前表单中第一个控件
var firstC = form.elements[0];
// 获取当前表单中 name 为 `myC` 的控件
var myC = form.elements["myC"];

直接通过 form 元素通过根据数据索引值或 name 来获取特定控件

// 获取当前表单中第一个控件，忽略其它不是控件的元素
var firstC = form[0];
// 取得页面中 id 为 'form1' 的表单
var form = getElementById("form1");
// 获取当前表单中 name 为 `myC` 的控件
var myC = form["myC"];

需要注意的是，如果当前表单中没有 name 为 myC 的控件，那么就会获取 id 为 myC 的 img 元素。
如果有多个同名元素，则返回这些元素的动态节点的集合