JavaScript高级程序学习笔记（一）表单脚本

<span style="font-family: 'Microsoft YaHei'; background-color: rgb(255, 255, 255);">1.基础知识</span>

在HTML中，表单是由<form>元素来表示的，而在JavaScript中，表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因而与其他HTML元素具有相同的默认属性。

不过，HTMLFormElement也有自己的独有的属性和方法，如下：

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

1 document.forms方法 获取表单3 可以获取页面中所有的表单。在得到的集合中，除了可以通过数值索引，也可以通过name值来获取特定的表单。

2.提交表单

使用<input>或<button>都可以定义提交按钮，只需要将其type特性的值设置为"submit"即可，另外图像提交按钮则是通过将<input>的type属性设置为"image"来定义的。故有以下三种方式：

1  <!-- 通用提交按钮 -->2 <input type="submit" value="Submit Form" /> 3 <!-- 自定义提交按钮 -->4 <button type="submit">Submit Form</button>5 <!-- 图像按钮 -->6 <input type="image" src="aa.gif" />

在表单存在上述认可一种按钮，并且表单控件获得焦点后，按回车即可提交表单（textarea除外）

阻止表单提交：

 1 var form = document.getElemenById("myForm");//取得id名为myForm的表单; 2 EventUtil.addHandler(for, "submit", function(event){ 3  4     //取得事件对象 5     event = EventUtil.getEvent(event); 6  7     //阻止默认事件 8     EventUtil.perventDefault(event);          9 })10 此处调用了preventDefault()方法来阻止了表单提交

submit()方法

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

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

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

重复提交问题：

提交表单最大的问题就是重复提交。解决这一问题有两个方法：

• 在第一次提交表单后就禁用提交按钮
• 利用onsubmit事件处理程序取消后续的表单提交操作

3.重置表单

使用type="reset"的<input>或<button>标签都可以创建重置按钮。

另外，和submit一样，当用户单击重置表单时候，会触发reset事件。利用这个机会，我们也可以在必要时候取消重置操作。和阻止submit一样，如下：

var form = document.getElementById("myForm");EventUtil.addHandler(form, "reset", function(){    event = EventUtil.getEvent(event);    EventUtil.preventDefault(event);})

此处同样使用了preventDefalut()方法，也可以使用JavaScript来重置，如下

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

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

4.表单字段elements集合

可以像访问页面中其他的元素一样，使用原生DOM方法访问表单元素。此外，每个表单都有elements属性，该属性是表单中所有表单元素（字段）的集合。并且是一个有序列表，包含着表单中的所有字段，例如<input>、<textarea>、<button>和<fieldest>等。每个表单字段在elements集合中的顺序，与他们出现在标记中的顺序相同，可以按照位置和name特性来访问他们。

例：

var form = document.getElementById("form1");//取得表单中的第一个字段var field1 = form.elements[0];//取得名为"textbox1"的字段var field2 = form.elements['textbox1'];//取得表单中包含的字段数量var filedCount = form.elements.length;

如果多个表单控件都在使用一个name（如单选按钮），name就会返回以该name命名的一个NodeList。

<form method="post" id="myForm">    <ul>

<span style="white-space:pre"></span><li><input type="radio" name="color" value="red"/>Red</li>

<pre name="code" class="javascript" style="font-size: 14px; line-height: 19px;"><span style="white-space:pre"></span><li><input type="radio" name="color" value="Green"/>Green</li>

<span style="white-space:pre"></span><li><input type="radio" name="color" value="Blue"/>Blue</li>

    </ul></form>

如上创建了3个name值相等的单选按钮，在访问elements['color']时，就会返回一个NodeList，其中包含3个元素；不过，如果访问elementes[0]，则只会返回第一个元素。

例：

var form = document.getElementById("myForm");var colorFields = form.elements["color"];alert(colorField);  //3var firstColorField = colorFields[0];var firstFormField = form.elementes[0];alert(firstColorField == fristFormField);  //true   ,说明通过form.elements[0]与colorFields[0]获取到的元素相同，都为第一个

 除此之外，我们也可以通过访问表单的属性来访问元素，例如form[0]可以取到第一个表单字段，而form["color"]则可以取得第一个命名字段。这些属性与通过elements集合访问元素是相同的。但是，我们应该尽可能的使用elements，通过表单属性访问元素只是为了与旧浏览器向后兼容而保留的一种过渡方式。

4.1共有的表单字段属性

除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多种表单字段，因此有些属性只适用于某些字段，但还是有一些属性是所有字段共有的。如下：

• disabled：布尔值，表示当前字段是否被禁用。
• form：指向当前字段所属表单的指针；只读。
• name：当前字段的名称。
• readOnly：布尔值，表示当前字段是否只读。
• tabIndex：表示当前字段的切换序号。
• type：当前字段的类型，如"checkbox"、"radio"，等等。
• value：当前字段的将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。

用JavaScript动态修改除了form属性之外的任何属性，例如：

var form = document.getElementById("myform");var field = form.elements[0];//修改value属性field.value = "Another value";//检查form属性的值alert(field.form === form); //true//把焦点设置到当前字段field.focus();//禁用当前字段field.disabled = true;//修改type属性（不推荐，但对<input>来说是可行的）field.type = "checkbox";

利用JavaScript动态修改属性，因此我们可以利用此来禁止用户多次点击submit按钮提交：

//避免多次提交表单EventUtil.addHandler(form, "submit", function(event){    event = EventUtil.getEvent(event);    var target = EventUtil.getTarget(event);    //取得提交按钮    var btn = target.elements["submit-btn"];     //禁用它    btn.disabled = true;});

以上代码submit事件添加了一个事件处理程序。注意：不能通过onclick事件处理程序来实现这个功能，原因为不同的浏览器之间存在“时差”，有的浏览器会在触发表单的submit事件之前触发click事件，而有的的相反。

4.2共有的表单字段方法

每个表单都有两个方法：focus()和blur()。

例如，想要在页面加载完毕后，将焦点转移到表单中的第一个字段。为此，我们可以侦听页面的load事件，并在该事件发生时在表单的第一个字段上调用focus()方法：

EventUtil.addHandler(window, "load", function(event){    document.form[0].elements[0].focus();})

 要注意的是，如果第一个字段是一个<input>元素，并且其type属性为hidden，那么以上代码会导致错误。另外，如果使用CSS的display和visibility属性隐藏了该字段，同样会导致错误。

HTML5为表单字段增加了一个autofocus属性，即自动获取焦点。

<input type="text" autofocus />

auofocus是一个布尔值属性，在支持autofocus的浏览器中他的值应该是true，不支持的则为空字符串。

4.3共有的表单字段事件

除了支持鼠标、键盘、更改和HTML事件之外，所有表单字段都支持下列3个事件：

• blur：当前字段失去焦点时触发
• change：对于<input>和<textarea>元素，在他们失去焦点且value值改变的时候触发；对于<selectr>元素，在其选项改变时触发