ywyan
ywyan

JS之表单脚本

一、表单基础知识

在 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"的表单

1、提交表单

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

以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
    //取得事件对象
    event = EventUtil.getEvent(event);
    //阻止默认事件
    EventUtil.preventDefault(event);
});

在 JavaScript 中，以编程方式调用 submit() 方法也可以提交表单。而且，这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。

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

以调用 submit() 方法的形式提交表单时，不会触发 submit 事件，因此要记得在调用此方法之前先验证表单数据。

解决重复提交表单的办法有两个：在第一次提交表单后就禁用提交按钮，或者利用 onsubmit 事件处理程序取消后续的表单提交操作。

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

调用 reset() 方法会像单击重置按钮一样触发 reset 事件。

提示：事实上，重置表单的需求是很少见的。更常见的做法是提供一个取消按钮，让用户能够回到前一个页面，而不是不分青红皂白地重置表单中的所有值。

3、表单字段

每个表单都有elements 属性，该属性是表单中所有表单元素（字段）的集合。这个 elements 集合是一个有序列表，其中包含着表单中的所有字段，例如 、 之间：

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