JavaScript表单编程总结

要操作表单，首先我们就要先知道如何获取表单引用，可以通过下面几种方法来获得。

获取表单的引用

在开始对表单进行编程前，必须先获取表单<form>的引用.有以下方法可以来完成这一操作。
1)采用典型的DOM树中的定位元素的方法getElementById()，只要传入表单的id即可获得表单的引用:
var vform=document.getElementByIdx(“form1”);

2)还可以用document的forms集合,并通过表单在form集合中的位置或者表单的name特性来进行引用:
var oform=document.forms[0];
var oform=document.forms[“formZ”];

获得了表单，我们就可以访问表单的字段了。

访问表单字段

每个表单字段,不论它是按钮,文本框还是其它内容,均包含在表单的elements集合中.可以用它们的name特性或者它们在集合中的位置来访问不同的字段:
Var oFirstField=oForm.elements[0];
Var oTextBox1=oForm.elements[“textBox1”];
此外还可以通过名字来直接访问字段,如:
Var oTextBox1=oForm.textbox1;
如果名字中有标记,则可以使用方括号标记:
Var oTextBox1=oForm[“text box 1”];

表单字段的共性

以下是所有表单字段(除了隐藏字段)
Disabled可以用来获取或设置表单控件是否被禁用.
Form特性用来指向字段所在的表单.
Blur()方法使表单字段失去焦点.
Focus()方法使表单字段获得焦点.
当字段失去焦点是,发生blur事件,执行onblur事件处理程序.
当字段获取焦点时,发生focus事件,执行onfocus事件处理函数.

提交表单
1 使用提交按钮或提交图象提交表单
例如：
<input value="submit" type="submit" />
<input src="submit.gif" type="image" />
当客户点击以上按钮将提交表单，如果按回车，并存在这些按钮，浏览器会认为点击了按钮

2 获取表单引用，再使用submit()方法
例如：
document.getElementById("form1").submit();
用button模拟submit：
<input value="submit" type="button" onclick="this.form.submit();" />

onsubmit 事件 表单提交时触发
例如；
<form onsubmit="alert(‘提交‘);">

注意：如果是使用submit()方法提交，将不会触发submit事件
仅提交一次
方法：用户点击提交按钮后，将其禁用
例如：
<input value="submit" type="button" onclick="this.disabled=true;this.form.submit();" />
注意：如果用submit类型按钮，由于在表单提交前就已被禁用，将导致提交失败

列表框、下拉框对象

列表框对象.options，得到所有option选项的集合

–  listbox.options[0].text;//获得文本

–  listbox.options[0].value;//获得值

–  listbox.selected; //选项是否被选中

multiple=multiple设为多选。

复选框和单选钮

u  checked属性:是否被选中

u  click():模仿点击，会触发click事件，改变选择状态。

u  对于复选框，可以进行进行遍历操作。

通过表单对象.name值，可返回复选钮的集合(等同于getElementsByName())

获取/更 改文本框的值

使用document.getElementById 的方式获得一个元素对象, 再点他的value属性,修改或者是获得 就是这个元素的value值

 选择文本

oTextbox1.focus() oTextbox1.select()

自动选择文本

onfocus="this.select()":获得焦点时，自动选择文本

文本框事件

两种文本框都支持blur,focus,change 和select 事件

Change事件在用户改变文本框的值之后，当文本框失去焦点时发生

Select事件和blur事件的不同之处：

Blur事件是文本框失去焦点时触发；change事件也是在文本框失去焦点后触发，但是只触发blur事件；如果文本被改变了change事件先触发，随后是blur事件

访问选项
HTML DOM为每个<select/>元素定义了 options 集合
获取<option/>显示文本和值：
一般DOM方法：
oListbox.option[1].firstchild.nodevalue;
oListbox.option[1].getAttribute("value");
HTML DOM方法：
oListbox.option[1].text;
oListbox.option[1].value;

index 属性 表示在options集合中的位置
例如：oListbox.option[1].index; //1

length 属性 表示选项数目
例如：oListbox.options.length;

获取/更改选中项
select：
selectedIndex 属性 选中的选项的索引（没有选中时为-1）
multiple 属性 设为"multiple"时可以在列表框中选择多个选项
如果选中多个选项，selectedIndex将包含第一个选项的索引

option：
selected 属性 表示选项是否被选中
通过对选项循环判断selected属性，获取所有选中选项的索引

添加选项
用javascript添加选项：
1 使用DOM方法创建<option/>元素
var oOption = document.createElement("option");
2 创建文本节点，并分配名称
oOption.appendChild(document.createTextNode(sName));
3 设置选项的值
oOption.setAttribute("value", sValue);
4 将选项添加到列表框中
oListbox.appendChild(oOption);

删除选项
用javascript删除选项：
1 将要删除的选项设置为null
oListbox.options[1] = null;
2 使用remove()方法，参数为要删除的选项的索引
oListbox.remove(0);
注意：如果用循环来删除多个选项，最好从最大的索引开始操作，因为删除后index索引会重置

移动选项
把选项从一个列表框移动到另一个列表框：
1 获取要移动的选项的引用
var oOption = oListboxFrom(iIndex);
2 在另一个列表框中使用appendChild()方法添加该选项，同时该选项会从当前列表框中删除
oListboxTo.appendChild(oOption);
注意：跟删除选项一样，如果要移动多个选项，最好从最大的索引开始操作

重新排序选项
将选项进行重新排序，包括向上和向下移动：
1 获取要移动的选项的引用
var oOption = oListbox(iIndex);
2 获取要移动的位置的选项
向上移动：var oPrevOption = oListbox.options[iIndex-1];
向下移动：var oNextOption = oListbox.options[iIndex+1];
3 使用insertBefore()方法重新设置位置
向上移动：oListbox.insertBefore(oOption, oPrevOption);
向下移动：oListbox.insertBefore(oNextOption, oOption);

创建自动提示的文本框

这种文本框会检查用户输入的头几个字符，然后给出帮助用户输入的列表

表单验证：

 表单验证是JavaScript最常用、最有用的功能之一。

 在表单内容提交之前进行验证、可用降低服务器处理的压力，缩短用户的额等待时间等

 表单校验中第一要考虑的问题就是，什么时候捕获表单的录入错误：

 在错误发生之前

 当错误发生时

 在错误发生之后