JavaScript中的表单脚本

表单脚本

表单的基础知识

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

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

var firstForm=document.forms[0];

var myForm=document.forms["form2"];

²  提交表单

用户单击提交按钮或者图像按钮时，就会提交表单。使用<input>或<button>都可以定义提交按钮，只要将其type特性的值设置为“submit”即可，而图像按钮则是通过将<input>的type特性值设置为“image”来定义的，单击以下代码生成的按钮，就可以提交表单：

通用提交按钮：

<input type="submit"value="Submit Form">

自定义提交按钮：

<button type="submit">SubmitForm</button>

图像按钮：

<input type="image"src="graphic.gif">

只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单。

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

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

varform=document.getElementById("myForm");

form.submit();

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

提交表单时可能出现的最大问题，就是重复提交表单。解决这一问题的办法有两个：在第一次提交表单后就禁用提交按钮，或者利用onsubmit事件处理程序取消后续的表单提交操作。

²  重置表单

在用户单击重置按钮时，表单会被重置。使用type特性值为“reset”的<input>或<button>都可以创建重置按钮：

通用重置按钮：

<input type="reset"value="Reset Form">

自定义重置按钮：

<button type="reset">ResetForm</button>

在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。

用户单击重置按钮重置表单时，会触发reset事件。利用这个机会，我们可以在必要时取消重置操作。

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

varform=document.getElementById("myForm");

form.reset();

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

表单字段

每个表单都有elements属性，该属性是表单中所有元素的集合。这个elements集合是一个有序列表，其中包含着表单中的所有字段，例如<input>、<button>、<textarea>和<fieldset>。每个表单字段在elements集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和name特性来访问它们：

varform=document.getElementById("form1");

取得表单中的第一个字段：

var field1=form.elements[0];

取得名为“textbox1”的字段：

varfield2=form.elements["textbox1"];

取得表单中包含的字段的数量：

var fieldCount=form.elements.length;

如果有多个表单控件都在使用一个name（如单选按钮），那么就会返回以该name命名的一个NodeList（假设在id为myForm的HTML表单中有3个单选按钮，它们的name都是color）：

varform=document.getElementById("myForm");

varcolorFields=form.elements["color"];

alert(colorFields.length);//3

通过form.elements[0]，访问到的第一个表单字段，与包含在form.elements["color"]中的第一个元素相同：

var firstColorField=colorFields[0];

var firstFormField=form.elements[0];

alert(firstColorField===firstFormField);//true

 

共有的表单字段属性：

除了form属性之外，可以通过JavaScript动态修改其他任何属性。

除了<fieldset>之外，所有表单字段都有type属性：（对于input元素，这个值等于HTML特性type的值。）

<input>和<button>元素的type属性是可以动态修改的，而<select>元素的type属性则是只读的。

 

共有的表单字段方法：

每个表单字段都有两个方法：focus()和blur()。其中focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件；blur()方法的作用是从元素中移走焦点，在调用blur()方法时，并不会把焦点转移到某个特定的元素上，仅仅是将焦点从调用这个方法的元素上面移走而已。

HTML5为表单字段新增了autofocus属性。在支持这个属性的浏览器中，只要设置这个属性，不用JavaScript就能自动把焦点移动到相应字段：

<input type="text"autofocus>

 

共有的表单字段事件：

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

 

文本框脚本

在HTML中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另一种是使用<textarea>的多行文本框。

要表现文本框，必须将<input>元素的type特性设置为“text”。而通过设置size特性，可以指定文本框中能够显示的字符数。通过value特性，可以设置文本框的初始值。而maxlength特性则用于指定文本框可以接受的最大字符数。

<textarea>元素则始终会呈现为一个多行文本框。要指定文本框的大小，可以使用rows和cols特性：其中rows特性指定的是文本框的字符行数，而cols特性指定的是文本框的字符列数。与<input>元素不同，<textarea>的初始值必须要放在<textarea>和</textarea>之间，且不能在HTML中给<textarea>指定最大字符数。

这两种文本框都会将用户输入的内容保存在value属性中，可以通过这个属性读取和设置文本框的值。

选择文本

这两种文本框都支持select()方法，这个方法用于选择文本框中的所有文本。在调用select()方法时，大多数浏览器都会将焦点设置到文本框中。这个方法不接受参数，可以在任何时候被调用。

 

选择事件：

在选择了文本框中的文本时，就会触发select事件。另外在调用select()方法时也会触发select事件。

 

取得选择的文本：

selectionStart和selectionEnd这两个属性中保存的是基于0的数值，表示所选择文本的范围（即文本选取开头和结尾的偏移量）。

要取得用户在文本框中选择的文本，可以使用：

vartextbox=document.forms[0].elements["textbox1"];

function getSelectedText(textbox){

         returntextbox.value.substring(textbox.selectionStart,textbox.selectionEnd);

}

 

选择部分文本：

所有文本框都有一个setSelectionRange()方法，这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引：

textbox.value="Hello World!";

选择所有文本：

textbox.setSelectionRange(0,textbox.value.length);//"HelloWorld!"

选择前3个字符：

textbox.setSelectionRange(0,3);//"Hel"

选择第4到6个字符：

textbox.setSelectionRange(4,7);//"oW"

要看到选择的文本，必须在调用setSelectionRange()之前或之后立即将焦点设置到文本框。

 

选择框脚本

选择框是通过<select>和<option>元素创建的。

除了所有表单字段共有的属性和方法外，HTMLSelectElement类型还提供了下列属性和方法：

选择框的type属性是“select-one”或者“select-multiple”，取决于HTML代码中有没有multiple特性。

选择框的value属性由当前选中项决定，相应规则如下：

在DOM中，每个<option>元素都有一个HTMLOptionElement对象表示，HTMLOptionElement对象有下列属性：

上面这些属性主要是为了方便对选项数据的访问，实现相同功能的常规的DOM方法效率比较低：

varselectbox=document.forms[0].elements["location"];

//推荐

var text=selectbox.options[0].text;//选项的文本

var value=selectbox.options[0].value;//选项的值

//不推荐

vartext=selectbox.options[0].firstChild.nodeValue;//选项的文本

varvalue=selectbox.options[0].getAttribute("value");//选项的值

（提醒一点：选择框的change事件与其他表单字段的change事件触发的条件不一样：其他表单字段的change事件是在值被修改且焦点离开当前字段时触发，而选择框的change事件只要选中了选项就会触发。）

²  选择选项

对于只允许选择一项的选择框，访问选中项的最简单方式，就是使用选择框的selectedIndex属性：

var selectedIndex=selectbox.selectedIndex;

varselectedOption=selectbox.options[selectedIndex];

alert("Selectedindex:"+selectedIndex+"\nSelectedtext:"+selectedOption.text+"\nSelected value:"+selectedOption.value);

对于可以选择多项的选择框，selectedIndex属性就好像只允许选择一项一样。设置selectedIndex会导致取消以前的所有选项并选择指定的那一项，而读取selectedIndex则只会返回选中项中第一项的索引值。

另一种选择选项的方式，就是取得对某一项的引用，然后将其selected属性设置为true：

selectbox.options[0].selected=true;

与selectedIndex不同，在允许多选的选择框中设置选择的selected属性，不会取消对其他选中项的选择，因而可以动态选中任意多个项。（但是，如果是在单选选择框中，修改某个选项的selected属性则会取消对其他选项的选择。需要注意的是，将selected属性设置为false对单选选择框没有影响。）

实际上，selected属性的作用主要是确定用户选择了选择框中的哪一项，要取得所有选中的项，可以循环遍历选项集合，然后测试每个选项的selected属性：

function getSelectedOptions(selectbox){

         varresult=new Array();

         varoption=null;

         for(vari=0,len=selectbox.options.length;i<len;i++){

                   option=selectbox.options[i];

                   if(option.selected){

                            result.push(option);

                   }

         }

         returnresult;

}

使用getSelectedOptions()函数取得选中项，使用for循环构建了一条包含所有选中项索引、文本和值的信息：

var selectbox=document.getElementById("selLocation");

varselectedOptions=getSelectedOptions(selectbox);

var message="";

for(vari=0,len=selectedOptions.options.length;i<len;i++){

         message+="Selectedindex:"+selectedOptions[i].index+"\nSelected text:"+selectedOptions[i].text+"\nSelectedvalue:"+selectedOptions[i].value);

}

alert(message);

²  添加选项

可以使用JavaScript动态创建选项，并将它们添加到选择框中。

第一种是使用DOM方法：

varnewOption=document.createElement("option");

newOption.appendChild(document.createTextNode("OptionText"));

newOption.setAttribute("value","OptionValue");

selectbox.appendChild(newOption);

第二种方式是使用Option构造函数来创建新选项，Option构造函数接受两个参数：文本（text）和值（value），第二个参数可选（这种方式在除IE外的浏览器中都可以使用）：

var newOption=new Option("OptionText","Option Value");

selectbox.appendChild(newOption);

第三种添加新选项的方式是使用选择框的add()方法。DOM规定这个方法接受两个参数：要添加的新选项和将位于新选项之后的选项。如果想在列表的最后添加一个选项，应该将第二个参数设置为undefined以兼容所有浏览器：

var newOption=new Option("OptionText","Option Value");

selectbox.add(newOption,undefined);

²  移除选项

移除选项的方式也有很多种。

可以使用DOM的removeChild()方法，为其传入要移除的选项：

selectbox.removeChild(selectbox.options[0]);

可以使用选择框的remove()方法，这个方法接受一个参数，即要移除选项的索引：

selectbox.remove(0);

将相应选项设置为null：

selectbox.options[0]=null;

²  移动和重排选项

使用DOM的appendChild()方法，就可以将一个选择框中的选项直接移动到另一个选择框中：（为appendChild()方法传入一个文档中已有的元素，那么就会先从该元素的父节点中移除它，再把它添加到指定的位置。）

varselectbox1=document.getElementById("selLocations1");

varselectbox2=document.getElementById("selLocations2");

selectbox2.appendChild(selectbox1.options[0]);

（移动选项与移除选项有一个共同之处，即会重置每一个选项的index属性。）

要将选择框中的某一项移动到特定位置，最合适的DOM方法就是insertBefore()。在选择框中向前移动一个选项的位置：

var optionToMove=selectbox.options[i];

selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index-1]);

（第二行代码对除第一个选项之外的其他选项都成立。）

类似的可以使用下列代码将选择框中的选项向后移动一个位置：

var optionToMove=selectbox.options[i];

selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index+2]);

（第二行代码适用于选择框中的所有选项，包括最后一个选项。）

 

在表单提交期间，浏览器是怎样将数据发送给服务器的：