表单脚本
下述内存主要讲述了《JavaScript高级程序设计（第3版）》第14章关于“表单脚本”。
刚开始人们使用JavaScript，最主要的目的之一就是表单的验证，分担服务器处理表单的责任。虽然现流行的大部分提交方式是通过ajax，但了解表单，对于ajax方式也是有重大帮助的！所以，大家不要看轻表单。
一、表单的基础知识
在HTML中，表单由元素来表示，而在JavaScript中，表单对应的则是HTMLFormElement类型。
表 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. 取得
方式1：通过getElementById(元素id)
var form = document.getElementById("form1");方式2：通过document.forms获取页面所有表单，然后通过数值索引获取对应表单
var firstForm = document.forms[0];方式3：通过document.forms获取页面所有表单，然后页面中form表单名称获取对应表单
var myForm = document.forms["form2"];方式4：早期浏览器会把每个设置了name特性的表单作为属性保存在document对象中【建议不要使用此方式】
var myFormf = document.form2;2. 提交表单
（1）提交按钮提交
方式1：通用提交按钮
type="submit" value="Submit Form" />方式2：自定义提交按钮
<button type="submit">Submit Formbutton>方式3：图像按钮
type="image" value="submitBtn.gif" />只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交表单。（textarea除外，在文本区中回车会换行）。如果表单没有提交按钮，安回车键不会提交表单。
注意，通过上述方式提交表单，浏览器会在将请求发送给服务器之前触发submit事件。
这样就可以决定是否需要验证表单。阻止这个事件的默认行为就可以取消表单提交。
<form action="http://www.baidu.com">
<input id="name"/>
<button type="submit">Submit Formbutton>
form>
<script type="text/javascript">
var form = document.forms[0];
form.addEventListener("submit", function(event) {
var name = document.getElementById("name");
if(name.value === "") {
event.preventDefault();
}
});
script>补充：想禁止通过回车提交表单，请参考【HTML防止input回车提交表单】
（2）JavaScript中提交
var form = document.forms[0];
form.submit();注意，这种方式不会触发sumbit事件。
提交表单过程中有可能发生的最大问题就是，重复提交表单。
解决方式：
（1）第一次提交表单后就禁用提交按钮。
要在“submit”事件处理函数中处理，不能在“click”事件处理函数中处理。因为有的浏览器会在click事件触发前，触发submit事件！
（2）利用onsubmit事件处理程序取消后续的表单提交方式。
我们项目中，请求通过ajax提交，防重复提交的方式大致类似于上述第（2）种。拦截ajax发送前、发送成功，发送完成过程，使用状态机标识当前处于哪种状态（loading、resubmit、success、error）。当用户请求ajax时，我们判断当前处于哪种状态：
- 如果是初始状态null，则直接发送请求，将状态切换为loading;
- 如果是loading或resubmit，提示“请求正在处理，不要重复请求”，将状态切换为resubmit;
- 如果是success或error，提示“成功或失败”，然后变为状态恢复初始。
3. 重置表单
（1）重置按钮提交
方式1：通用重置按钮
type="reset" value="Reset Form" />方式2：自定义重置按钮
<button type="reset">Reset Formbutton>注意，通过上述方式重置表单，浏览器会触发reset事件。阻止这个事件的默认行为就可以取消重置提交。
<form action="http://www.baidu.com">
<input id="name"/>
<button type="submit">Submit Formbutton>
<button type="reset"> Reset Formbutton>
form>
<script type="text/javascript">
var form = document.forms[0];
form.addEventListener("reset", function(event) {
alert("我就不让你重置，咋地！");
event.preventDefault();
})
script>（2）JavaScript中重置
var form = document.forms[0];
form.reset();注意，这种方式不会触发reset事件。
4. 表单字段
- form.elements，获取表单中所有控件集合（HTMLCollection）。
- form.elements[n]; // 返回第n+1个元素
- form.elements[“name”]; // 返回name值为“name”的NodeList
<form action="http://www.baidu.com">
<input id="name" name="name"/>
<input type="radio" name="color" value="red"/>Red
<input type="radio" name="color" value="green"/>Green
<input type="radio" name="color" value="blue"/>Blue
<button type="submit">Submit Formbutton>
<button type="reset"> Reset Formbutton>
form>
<script type="text/javascript">
var form = document.forms[0];
form.elements[1] === form.elements["color"][0];// value值为red的input标签
script>（1）表单字段属性
| 属性 | 作用说明 |
|---|---|
| disabled | 布尔值，表示当前字段是否被禁用 |
| form | 指向当前字段所属表单的指针；只读 |
| name | 当前字段的名称 |
| readOnly | 布尔值，表示当前字段是否只读 |
| tabIndex | 表示当前字段的切换（tab）序号 |
| type | 当前字段的类型 |
| value | 当前字段被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机的路径 |
（2）表单字段方法
- foucs()获取焦点，激活字段，使其可以响应键盘事件
- blur()失去交单。
window.addEventListener("load", function() {
document.forms[0].elements[0].focus(); // 让表单第一个元素获取焦点
});HTML5中表单字段新增了autofoucs属性。
type="text" autofoucs />（3）表单字段事件
- blur：当前字段失去焦点触发
- change：对于和元素，在它们失去焦点且value值改变时触发；对于元素，在其选项改变时触发。
- focus：当前字段获取焦点时触发
表单错误提示流程：利用focus事件修改文本框的背景颜色，以便清楚表明这个字段获取了焦点；利用blur事件恢复文本框的背景颜色；利用change事件在用户输入了非规定字符时提示错误。
在项目中的validate插件，只用到了blur和focus事件。因为某些浏览器中，blur事件会先于change事件；有些会恰好相反！
二、文本框脚本
HTML中，有两种方式表示文本框：单行文本框、多行文本框