霜天晓
霜天晓

十三、表单脚本

  JavaScript 最初的一个应用，就是分担服务器处理表单的责任，打破处处依赖服务器的局面。

  尽管目前的 Web 和 JavaScript 已经有了长足的发展，但 Web 表单的变化并不明显。

  由于 Web 表单没有为许多常见任务提供现成的解决手段，很多开发人员不仅会在验证表单时使用 JavaScirpt，而且还增强了一些标准表单控件的默认行为。

1、表单的基础知识

  在 HTML 中，表单是由

元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。

  HTMLFormElement 继承了 HTMLElement，因而与其他 HTML 元素具有相同的默认属性。不过，HTMLFormElement 也有它自己下列独有的属性和方法。

  • acceptCharset：服务器能够处理的字符集；等价于 HTML 中的 accept-charset 特性。
  • action：接受请求的 URL；等价于 HTML 中的 action 特性。
  • elements：表单中所有控件的集合（HTMLCollection）。
  • enctype：请求的编码类型；等价于 HTML 中的 enctype 特性。
  • length：表单中控件的数量。
  • method：要发送的 HTTP 请求类型，通常是"get"或"post"；等价于 HTML 的 method 特性。
  • name：表单的名称；等价于 HTML 的 name 特性。
  • reset()：将所有表单域重置为默认值。
  • submit()：提交表单。
  • target：用于发送请求和接收响应的窗口名称；等价于 HTML 的 target 特性。

  取得元素引用的方式有好几种。其中最常见的方式就是将它看成与其他元素一样，并为其添加 id 特性，然后再像下面这样使用 getElementById() 方法找到它。

var form = document.getElementById("form1");

  其次，通过 document.forms 可以取得页面中所有的表单。在这个集合中，可以通过数值索引或 name 值来取得特定的表单，如下面的例子所示。

var firstForm = document.forms[0]; // 取得页面中的第一个表单
var myForm = document.forms["form2"]; // 取得页面中名称为"form2"的表单

  另外，在较早的浏览器或者那些支持向后兼容的浏览器中，也会把每个设置了 name 特性的表单作为属性保存在 document 对象中。
  例如，通过 document.form2 可以访问到名为"form2"的表单。不过，我们不推荐使用这种方式：一是容易出错，二是将来的浏览器可能会不支持。
  注意，可以同时为表单指定 id 和 name 属性，但它们的值不一定相同。

1.1、提交表单

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

  只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单。（textarea 是一个例外，在文本区中回车会换行。）如果表单里没有提交按钮，按回车键不会提交表单。
  以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。这样，我们就有机会验证表单数据，并据以绝决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。例如：下列代码会阻止表单提交。

var form = document.getElementById('myForm');
EventUtil.addHandler(form, "submit", function(event) {
    
    // 取得事件对象
    event = EventUtil.getEvent(event);

    // 阻止默认事件
    EventUtil.preventDefault(event);
});

  调用 preventDefault() 方法组织了表单提交。一般来说，在表单数据无效而不能发送给服务器时，可以使用这一技术。
  在 JavaScript 中，以编程方式调用 submit() 方法也可以提交表单。而且，这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。示例：

var form = document.getElementById("myForm");

// 提交表单
form.submit();

  在以调用 submit() 方法的形式提交表单时，不会触发 submit 事件，因此要记得在调用此方法之前先验证表单数据。
  提交表单时可能出现的最大问题，就是重复提交表单。在第一次提交表单后，如果长时间没有反应，用户可能会变得不耐烦。这时候，他们也许会反复单击提交按钮。结果往往很麻烦（因为服务器要处理重复的请求），或者会造成错误（如果用户是下订单，那么可能会多订好几份）。
  解决这一问题的办法有两个：在第一次提交表单后就禁用提交按钮，或者利用 onsubmit 事件处理程序取消后续的表单提交操作。

1.2、重置表单

  在用户点击重置按钮时，表单会被重置。使用 type 特性值为"reset"的或

  上述两个按钮都可以用来重置表单。在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。
  用户单击重置按钮重置表单时，会触发 reset 事件。利用这个机会，我们可以在必要时取消重置操作。例如，下面展示了阻止重置表单的代码。

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event) {
    
    // 取得事件对象
    event = EventUtil.getEvent(event);

    // 阻止表单重置
    EventUtil.preventDefault(event);
});

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

var form = document.getElementById("myForm");

// 重置表单
form.reset();

  与调用 submit() 方法不同，调用 reset() 方法会像点击重置按钮一样处罚 reset 事件。

  在 Web 表单设计中，重置表单通常意味着对已经填写的数据不满意。重置表单经常会导致用户摸不着头脑，如果意外地触发了表单重置事件，那么用户甚至会很恼火。
  事实上，重置表单的需求是很少见的。更常见的做法是提供一个取消按钮，让用户能够回到前一个页面，而不是不分青红皂白地重置表单中的所有值。

1.3、 表单字段

  可以像访问页面中的其他元素一样，使用原生 DOM 方法访问表单元素。此外，每个表单都有elements 属性，该属性是表单中所有表单元素（字段）的集合。
  这个 elements 集合是一个有序列表，其中包含着表单中的所有字段，例如、 之间，如下面的例子所示。

  另一个与的区别在于，不能在 HTML 中给