JavaScript表单编程

浏览数：26 / 时间：2015年06月08日

一、对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,我们使用一个提交按钮或者模拟提交按钮的图形来提交表单。

　　提交表单，首先要得到一个对form元素的引用。得到表单引用后，我们就可以直接调用submit（）方法了;

　　　　oForm.submit（）;

　　在提交按钮被点击之后，submit事件被触发，同时onsubmit事件处理程序被执行。使用onsubmit事件处理程序，可以中止表单提交，这在客户端数据校验时是特别有用的。中止表单提交，实际就是阻止事件的默认行为。

　　　　Function handlesubmit（）{

　　　　return false；

　　　　}

　　然后我们可以在表单的onsubmit事件处理程序中调用此方法：

　　5.表单重置

　　　　使用XHTML中的reset按钮，为用户提供了一种可将所有表单字段重置到它们的默认值的方法，此法可以从脚本中直接重置表单，不需要脚本去通知浏览器做什么：

二、对文本框进行脚本编写

　　在HTML中，两个主要的输入文本的文本框是：单行版的<input type=”text”/>和多行版的<textarea/>。

　　1.获得/更改文本框的值

　　　　虽然<input type=”text”/>和<textarea/>是不同的元素，但是他们都支持同样的属性vlaue，以获取文本框的文本：

　　<!DOCTYPE html>

　　<html>

　　 function getValues(){

　　 var v1=document.getElementById("txt1");

　　 var v2=document.getElementById("txt2");

　　 alert("txt1"的值是\""+v1.value+"\"\n" + "txt2"的值是\""+v2.value+"\"")

}

</script>

　　</head>

　　<body>

　　</body>

　　</html>

　　这个示例现示了一个但行文本框、多行文本框和按钮。点击按钮时，弹出一个警告对话框显示每个文本框的值。使用length属性可以得到文本框内值得长度：

alert ("txt1"的长度是\"" + v1.value.length + "\"\n" + "txt2"的长度是\""+ v2.value.length + "\"")

}

　　属性value还可以用于给文本框赋新值：

　　v1.value=“第一个文本框”；

　　v2.value=“第二个文本框”；

　　2.选择文本

　　　　两种类型的文本框都支持select（）方法，该方法用于选择文本框中的所有文本。为了使该方法起作用，文本框必须获得焦点。且必须在select（）方法之前调用focus（）方法。

　　3.文本框事件

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

　　　　change事件在用户改变文本框的值之后，当文本框失去焦点时发生。但是通过设置value属性改变文本框的值时，不触发change事件。

　　　　select事件是在一个或多个字符被选中时发生，不管是手动选中或者使用select（）方法。

　　　　blur事件是当文本框失去焦点时触发，文本框的值没有发生改变。

　　4.自动选择文本

　　　　为实现文本框获得焦点时，自动选择文本框中所有的文本，我们可以在文本框的onfocus事件处理程序中使用select（）方法：

三、对列表框和组合框进行脚本编写

　　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.得到复选框的值

　　　　得到复选框的值的用法和单选框基本相同，不同的是，允许多个复选框被选中，所以得到的值也是多个：

　　　　　　 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值，提交成功。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JavaScript表单编程