首页 > 代码库 > JavaScript表单编程
JavaScript表单编程
一、对form元素进行脚本编写
JavaScript可以通过document对象的子对象form对象（DOM中的HTMLFormElement对象）访问HTML文档中的表单。
1.获取表单的引用
在对表单进行脚本编程之前，我们必须要得到对form元素的引用：
- 使用DOM树中定位一个元素的方法，即使用getElementById（）方法，并将表单的id作为方法的参数；
document.getElementById（“id号”）
- 使用文档的表单集合，并且通过表单在form集合中的位置或者通过其name属性；
document.forms[0]；//得到第一个表单
document.forms[“formz”]；//得到名为formz的表单
2.访问表单字段
每个表单字段都包含在表单的element集合中，可以通过使用表单的name属性或者他在集合中的位置，访问集合中的不同字段。
1）oForm.elements[0]；//得到第一个表单字段
2）oForm.elements[“textBox1”]；//得到名为textBox1的字段
3）oForm.textBox1；//得到名为textBox1的字段
4）如果名称之间有空格，可以用中括号代替：
oForm.[“text box1”]；//得到名为textBox1的字段
3.表单字段共性
所有表单的字段（除隐藏字段）有如下共同属性、方法和事件：
- disabled属性该属性用于指示一个表单控件是否可用一个disabled控件不允许用户输入。
- form属性该属性返回包含字段的表单。
- blur（）方法：该方法导致表单字段失去焦点。
- focus（）方法：该方法导致表单字段获得焦点。
- blur事件：当表单字段失去焦点时，发生该事件，随后执行onblur事件处理程序。
- focus事件：当表单字段获得焦点时，发生该事件，随后执行onfocus事件处理程序。
例如：
var v1=oForm.elements[0]；
var v2=oForm.elements[1]；
//将第一个字段设置为不可用
v1.disabled=true
//设置焦点在第二个字段
v2.focus（）;
//判断字段的form属性是否等于oForm
alert（v1.form==oForm）；//输出true
4.表单提交
在XHTML,我们使用一个提交按钮或者模拟提交按钮的图形来提交表单。
<input type=”submit”value=http://www.mamicode.com/”Submit”/>
<input type=”image”src=http://www.mamicode.com/”Submit.gif”/>
提交表单，首先要得到一个对form元素的引用。得到表单引用后，我们就可以直接调用submit（）方法了;
oForm.submit（）;
在提交按钮被点击之后，submit事件被触发，同时onsubmit事件处理程序被执行。使用onsubmit事件处理程序，可以中止表单提交，这在客户端数据校验时是特别有用的。中止表单提交，实际就是阻止事件的默认行为。
Function handlesubmit（）{
return false；
}
然后我们可以在表单的onsubmit事件处理程序中调用此方法：
<foem method=”post” action=”#” onsubmit=”handlesubmit（）”>
5.表单重置
使用XHTML中的reset按钮，为用户提供了一种可将所有表单字段重置到它们的默认值的方法，此法可以从脚本中直接重置表单，不需要脚本去通知浏览器做什么：
<input type=”reset”value=http://www.mamicode.com/”重置”/>
二、对文本框进行脚本编写
在HTML中，两个主要的输入文本的文本框是：单行版的<input type=”text”/>和多行版的<textarea/>。
1.获得/更改文本框的值
虽然<input type=”text”/>和<textarea/>是不同的元素，但是他们都支持同样的属性vlaue，以获取文本框的文本：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function getValues(){
var v1=document.getElementById("txt1");
var v2=document.getElementById("txt2");
alert("txt1"的值是\""+v1.value+"\"\n" + "txt2"的值是\""+v2.value+"\"")
}
</script>
</head>
<body>
<input type="text" size="12" id="txt1"/><br/>
<textarea rows="5" cols="25" id="txt1"/><br/>
<input type="button" value="http://www.mamicode.com/获取值" onclick="getValues()"/>
</body>
</html>
这个示例现示了一个但行文本框、多行文本框和按钮。点击按钮时，弹出一个警告对话框显示每个文本框的值。使用length属性可以得到文本框内值得长度：
alert ("txt1"的长度是\"" + v1.value.length + "\"\n" + "txt2"的长度是\""+ v2.value.length + "\"")
}
属性value还可以用于给文本框赋新值：
v1.value=http://www.mamicode.com/“第一个文本框”；
v2.value=http://www.mamicode.com/“第二个文本框”；
2.选择文本
两种类型的文本框都支持select（）方法，该方法用于选择文本框中的所有文本。为了使该方法起作用，文本框必须获得焦点。且必须在select（）方法之前调用focus（）方法。
3.文本框事件
两种文本框都支持blur、focus、change和select事件。
change事件在用户改变文本框的值之后，当文本框失去焦点时发生。但是通过设置value属性改变文本框的值时，不触发change事件。
select事件是在一个或多个字符被选中时发生，不管是手动选中或者使用select（）方法。
blur事件是当文本框失去焦点时触发，文本框的值没有发生改变。
4.自动选择文本
为实现文本框获得焦点时，自动选择文本框中所有的文本，我们可以在文本框的onfocus事件处理程序中使用select（）方法：
<input type="text" onfocus=“this.select（）”/>
<textarea onfocus=“this.select（）”/><textarea/>
三、对列表框和组合框进行脚本编写
1.访问选项
为了得到select控件中一个option元素的显示文本和值可以使用DOM功能：
v=document.getElementById（“selectId”）;
alert（v.options[1],firstChild.nodeValue）;//输出显示文本
alert（v.options[1],getAttribute（“value”））;//输出值
也可以使用HTML DOM中两个特定的option元素属性：text和value；
alert（v.options[1],text）;//输出显示文本
alert（v.options[1],value）;//输出值
每个option元素也有一个index属性，指示它在集合中的位置：
alert（v.options[1],index）;//输出1
2.获取/更改选项
Select元素的selectedIndex属性，可以返回当前被选中选项的索引，如果没被选中则返回-1；通过设置Select元素的multiple属性为“multiple”，可以使下拉列表被选中多项（组合框不能）；
alert（“被选中索引为”+ v.selectedIndex）;
selectedIndex只包含第一个被选中项的索引号，无法显示多个选中项。为此，我们创建了一个自定义方法getSelectedIndexes（）。getSelectedIndexes（）方法利用了option元素的另一个特殊属性：select属性。在HTML DOM中定义select属性是一个布尔值，指示某个选项是否被选中。
getSelectedIndexes（）方法可以被用来获取多个选中项的索引，或者很据返回的数组的长度判断有多少选项被选中。
3.添加选项
动态添加选项到Select元素中，有以下几个步骤：
1）定义一个带三个参数的方法，这三个参数分别是要添加的选项的列表框、添加的选项的名称以及要添加的选项的值。
2）使用DOM方法创建一个option元素，然后创建一个文本节点分配给选项的名称。
3）设置option元素的value属性。
4）通过appendChild（）方法，将新选项添加到Select元素中。
4.删除选项
删除选项的方法有两种，一种是DOM提供的功能，一种是HTNL DOM提供的功能.
DOM提供的功能为：使用option集合，将要移除的选项设置为null：
v.options[1]=noll；
DOM提供的功能为：利用select元素的remove（）方法，将要移除的选项的索引传递给remove（）方法：
Var v=document.getElementById（“selectId”）;
v.remove[0]；//移除第一个选项
5.移动选项
移除选项可以使用DOM的appendChild（）方法，可以从第一个列表框中逐个移动选项到第二个列表框中。如果我们传递一个文档中的一个元素到appendChild（）方法，该元素就会从它的父元素中移出，并且放在指定的位置。
首先编写一个方法，并且让它接收三个参数：当前选中所在的列表框、改选项要移到的列表框，要移动的选项索引；将给定选项移动到另一个列表框中。
6.重新排序选项
对列表框中的选项重新排序，我们需要两个方法：一个用于将选项向上移动，一个用于将选项向下移动。每个方法有两个参数：要作用的列表框、要移动的选项索引。这两个方法都需要用到DOM的insertBefore（）方法，以对option元素重新排序。
操作中需要注意的是，向上移动的的方法中首先检查选项的索引是否大于0，因为我们不可能把第一个选项向上移动。向下移动的方法也是如此，不过是检查最后一个选项。
var v=document.getElementById（“selectId”）;
ListUtil.shiftUp（v，1）；//将索引为1的选项向上移动一个位置
ListUtil.shiftDown（v，2）；将索引为2的选项向下移动一个位置
四、对复选框和单选框进行脚本编写
复选框和单选框有关的对象，除了有与其他input元素共同的对象的属性外，还有一些其他的属性：
checked：布尔值，指示空间的状态；
defaultChecked：布尔值，指示页面装载时控件是否被选中；
click（）：模仿按钮点击，改变空间状态，对应的时间onclick；
1.得到单选框的值
通过单选框的value属性得到单选框的值：
document.getElementById（“selectId”）.value;
2.得到复选框的值
得到复选框的值的用法和单选框基本相同，不同的是，允许多个复选框被选中，所以得到的值也是多个：
<script type="text/javascript">
function getValues(){
var v=document.getElementById("myForm").cities;
for(i=0,i<oChecks.length;i++){
if(oChecks[i].checked){
alert(oChecks[i].value);
}}}
</script>
五、表单验证
使用submit事件在错误发生之后捕获错误
表单数据输入完后，点击提交按钮或者使用onsubmit（）方法，可以把表单发送到有表单action属性指定的表单处理程序进行处理。为防止无端数据进入服务器端，我们可以在submit事件发生之前，表单提交到表单处理程序之前，验证表单中输入程序的有效性，即把校验代码写入submit事件处理程序中。数据无效，处理程序返回false值取消提交。数据有效，处理程序返回true值，提交成功。
<form id=”myform” method=”post”antion=”#”onsubmit（“return validate( ) ; ”）>
JavaScript表单编程