{点点滴滴}DOM的Form对象

阅读量：5291 次

发布时间：2019-06-14

本文共 5141 字，大约阅读时间需要 17 分钟。

DOM的Form对象

作者：

Form对象的主要功能就是能够直接访问HTML文档中的Form表单。一个web页面可以有一个或多个Form表单，使用document.forms数组对象可以访问到各个Form表单。可以将<form>标签中嵌入的表单字段元素的名称作为一个form对象的属性，来引用表示这个表单字段字段元素的对象。

form对象的方法

◆ submit方法：该方法是form对象的专用方法，用于向服务器递交表单数据，模拟用户单击<input type=submit …>按钮的效果，但该方法不产生onsubmit事件。

◆ item方法：返回代表Form表单中的某个表单字段元素所对应的对象，接受的参数可以是表单字段元素的名称，也可以是表单字段元素在Form表单中的索引序号。item方法不能返回< input type=submit …>类型的表单字段元素。

form对象的属性

HTML文档中的<form>标签具有name, target, title, enctype, method, action等属性。与之对应，Javascript中的form对象也具有这些属性来访问HTML文档中的<form>标签属性。Form对象的属性还包括<form>标签中嵌入的表单字段元素的名称，可以将表单字段元素的名称作为form对象的属性，来应用表单字段元素所对应的对象。下面的实例是如何访问form的对象及其属性：

</form>

function simu_submit()

{

// 用Form名称直接引用form对象

form1.method = “get”;

// 将form名称作为document对象的属性来引用form对象，

// 并用user作为form对象的属性来引用名为user的文本框元素对象

document.form1.user.value = “lisi”;

// 下面2条语句使用item方法来访问文本框元素对象

// document.form1.item(“user”).value = “lisi”;

// document.form1.item(0).value = “lisi”;

// 下面的几条语句都是使用forms数组对象来引用其中的form1表单

// document.forms.form1.user.value = “lisi”;

document.forms[“form1”].action = “http://www.baidu.com/deal.jsp”;

document.forms[0].submit();

}

</script>

<! - - 下面这条语句实现与上面语句同样的功能

- ->

但是，上面的代码运行后，单击“递交”按钮后，页面并没有跳转，单击“递交”的超链接时，状态栏还会出现错误提示。这是因为表单提交按钮的name属性设置成“submit”，从而与submit方法发生了冲突。将表单递交按钮的name属性修改为submit1后，正常。

（设置HTML元素的name和id属性值，定义Javascript中的变量名、函数名等时，都要特别注意不能与DOM对象模型中定义的对象名、属性名、方法名相冲突。）

还可以在Form表单的action属性中使用javascript协议。下面的实例在form表单的action属性中使用Javascript协议，来实现用户提交不同内容后不同的效果，其中failure.html和succes.html文件，可以自行设计：

</form>

function login()

{

if (frmLogin.txtUser.value = = “lisi”)

{

window.open(“failure.html”, “_self”);

}

else

{

window.open(“success.html”,”_self”);

}

</script>

脚下留心：

设置HTML元素的name和id属性值，定义Javascript中的变量名、函数名等时，都要特别注意不能与DOM对象模型中定义的对象名、属性名、方法名相冲突。前面实例中提到过这个问题。如你把一个自定义的函数名用click来命名，就会出现错误。

Form对象的事件

onsubmit事件：是form对象的专有事件，当用户单击<input type=submit …>按钮或在表单的单行文本输入框中按下回车键后，表单数据即将递交到WWW服务器前发生该事件。

onsubmit事件处理的典型用法就是检查Form表单收集到的数据的合法性和完整性，防止将不正确的数据传送给服务器。在onsubmit事件属性设置中，一定要使用return语句返回事件处理的结果，如果返回false，则取消数据的提交，如果返回true，则继续提交到服务器。

有了Javascript，就可以在客户端来验证用户提交的数据是否合法，而不用提交到服务器后由服务器程序来验证，这样既减少了网络流量，又降低了服务器开销。

JavaScript脚本代码可以放在web页面的任何合法位置，如果代码较多，为了整洁方便，最好将所有的脚本代码放在web页面的同一个地方，通过是紧跟在web页面开头部分的<body>标签之后。

下面的实例演示如何在表单提交数据时，对用户输入进行检查：

会员号码（6位数字）：<input type=text name=mem_id>

</form>

function dosubmit(frm)

{

if (frm.mem_id.value.length != 6)

{

alert(“会员号必须是6位”);

return false;

}

else

{

var mem_value = frm.mem_id.value;

for (var i=0; i<mem_value.length; i++)

{

if(mem_value.charAt(i)<’0’ || mem_value.charAt(i)>’9’)

{

alert(“会员号只能是数字”);

return false;

}

// frm.submit();

return true;

}

</script>

在事件属性的设置值中，可以使用this关键字代表触发该事件的事件源对象，所以作为参数传递给dosubmit函数的this就代表form1对象。

如果取消// frm.submit();语句前的注释，在文本输入框中输入正确格式的会员后提交表单，浏览器会打开2个新的窗口，这说明表单数据被提交了2次。这是因为frm.submit()语句会提交表单数据，当document方法返回true时，浏览器也会继续提交表单数据。所以，不能让frm.submit()语句与return true 语句在onsubmit事件处理函数中同时出现。

如果上面要用frm.submit()语句提交表单数据，onsubmit事件属性设置中必须总是返回false，在dosubmit函数中不必再使用任何return语句。

因为浏览器提交表单数据到服务器的动作，是由单击表单上的“提交”按钮(<input type=submit …>)事件引发的，所以，也可以在表单提交按钮的单击事件处理程序中验证表单数据，并决定是否继续提交表单数据。这样的话，不用修改上面的Javascript代码，只要修改HTML表单及提交按钮的事件属性设置即可。修改内容如下：

会员号码(6位数): <input type=text value=”递交” οnclick=”dosubmit(this.form); return false”>

</form>

注意：这种方式，只能在单击表单的“提交”按钮时进行数据验证，当在表单文本输入按下回车时，表单数据会直接提交。

form对象的对象属性

1、 all数组属性：代表某个对象对应的HTML标签中所包含的所有HTML子元素对象的集合，在这里代表<form>标签下的所有子元素对象的集合；

2、 elements数组对象：代表<form>标签下除了<input type=image >之外的表单字段元素对象的集合；

3、 children数组属性：代表某个对象对应HTML标签中包含的所有直接的HTML子元素对象的结合，不包含子元素下面的子元素，用在form对象时，包含<input type=image>表单字段元素所对应的对象。

form表单字段元素对象

form表单字段元素包括普通按钮、提交按钮、重置按钮、单选按钮、复选按钮、单行文本输入框、多行文本输入框、下拉列表等。不能以document.name或document.id属性值，以及name或id属性值的简写形式访问嵌套在<form>标签中的表单字段元素，如：

<form>

</form>

不能用document.email和idEmail等形式来访问上面的文本输入框的对象。