首页 > 代码库 > JavaScript表单处理(上)

JavaScript表单处理(上)

为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面。

 发文不易,转载请亲注明出处,谢谢!

一.表单介绍

在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement,因此它拥有HTML元素具有的默认属性,并且还独有自己的属性和方法:

 

HTMLFormElement属性和方法

属性或方法

说明

acceptCharset

服务器能够处理的字符集

action

接受请求的URL

elements

表单中所有控件的集合

enctype

请求的编码类型

length

表单中控件的数量

name

表单的名称

target

用于发送请求和接受响应的窗口名称

reset()

将所有表单重置

submit()

提交表单

 

获取表单<form>对象的方法有很多种,如下:

document.getElementById(‘myForm‘);                //使用ID获取<form>元素

document.getElementsByTagName(‘form‘)[0];     //使用获取第一个元素方式获取 

document.forms[0];                                                 //使用forms的数字下标获取元素

document.forms[‘yourForm‘];                                   //使用forms的名称下标获取元素

document.yourForm;                                        //使用name名称直接获取元素(不推荐)

 

PS:最后一种方法使用name名称直接获取元素,已经不推荐使用,这是向下兼容的早期用法。问题颇多,比如有两个相同名称的,变成数组;而且这种方式以后有可能会不兼容。

 

提交表单

通过事件对象,可以阻止submit的默认行为,submit事件的默认行为就是携带数据(默认以get方式)跳转到指定页面(默认为本页)。

       addEvent(fm, ‘submit‘, function (evt) {      //注意是在form对象上触发submit事件

              preDef(evt);

       });

 

PS:submit事件,用传统的方式:fm.onsubmit = function () {}

PS:必须把submit事件绑定到form对象上,才可以触发submit事件,只不过触发submit事件的流程是点击input中的submit按钮而已。

 

我们可以使用submit()方法来自定义触发submit事件,也就是说,并不一定非要点击submit按钮才能提交。示例代码如下:

//实现ctrl+enter实现提交

      

1  addEvent(document, ‘keydown‘, function (evt) {
2 
3               var e = evt || window.event;
4 
5               if (e.ctrlKey && e.keyCode == 13)  fm.submit();
6 
7        });

 

PS:在表单中尽量避免使用name="submit"或id="submit"等命名,这会和submit()方法发生冲突导致无法提交。

 

提交数据最大的问题就是重复提交表单。因为各种原因,当一条数据提交到服务器的时候会出现延迟等长时间没反映,导致用户不停的点击提交,从而使得重复提交了很多相同的请求,或造成错误、或写入数据库多条相同信息。

//模拟延迟

      

 1  addEvent(fm, ‘submit‘, function (evt) {              
 2 
 3               preDef(evt);     //先阻止提交
 4 
 5               setTimeout(function () {
 6 
 7                      fm.submit();      //提交
 8 
 9               }, 3000);    //3秒钟之后才发送数据(延迟就可能会导致,用户不停地点击提交)
10 
11        });

 

有两种方法可以解决这种问题:

第一种就是提交之后,立刻禁用点击按钮;

第二种就是提交之后取消后续的表单提交操作。

法1:

document.getElementById(‘sub‘).disabled = true;              //将按钮禁用(仅限于使用提交按钮进行提交的形式)

 

法2:

 1 var fm = document.getElementById(‘myForm‘);
 2 
 3 var flag = false;                                                 //设置一个监听变量
 4 
 5 addEvent(fm, ‘submit‘, function (evt) {
 6 
 7               preDef(evt);
 8 
 9               if (flag == true)  return;                     //如果存在返回退出事件
10 
11               flag = true;            //否则确定是第一次,设置为true,表示我提交过一次了
12 
13               alert(‘提交‘);
14 
15               setTimeout(function () {
16 
17                      fm.submit();
18 
19               }, 3000);
20 
21        });
22 
23  

 

PS:在某些浏览器,F5只能起到缓存刷新的效果(浅刷新),有可能获取不到真正的源头更新的数据。那么使用ctrl+F5就可以把源头给刷出来。

重置表单

用户点击重置按钮时,表单会被初始化。虽然这个按钮还得以保留,但目前的Web已经很少去使用了因为用户已经填写好各种数据,不小心点了重置就会全部清空,用户体验极差。

有两种方法调用reset事件:

第一个就是直接type="reset"即可;

第二个就是使用fm.reset()方法调用即可。

法1:

<input type="reset" value="http://www.mamicode.com/重置" />                  //不需要JS代码即可实现

 

法2:

       addEvent(document,‘click‘, function () {

              fm.reset();                                                //使用JS方法实现重置

       });                

 

表单字段

如果想访问表单元素,可以使用之前章节讲到的DOM方法访问。但使用原生的DOM访问虽然比较通用,但不是很便利。表单处理中,我们建议使用HTML DOM,它有自己的elements属性该属性是表单中所有元素的集合

PS:表单控件是什么? form里面的input,submit,textarea,select 这些叫做表单控件,其实就是表单元素标签,通过表单元素集合获取第一个元素,非表单控件会被忽略掉。

fm.elements[0];                                                //获取第一个表单字段元素

fm.elements[‘user‘];                                           //获取name是user的表单字段元素

fm.elements.length;                                                 //获取所有表单字段的数量

 

如果多个表单字段都使用同一个name,那么就会返回该name的NodeList表单列表。

fm.elements[‘sex‘];                                            //获取相同name表单字段列表         

 

PS:我们是通过fm.elements[0]来获取第一个表单字段的,但也可以使用fm[0]直接访问第一个字段。因为fm[0]访问方式是为了向下兼容的,所以,我们建议大家使用elements属性来获取。

 

共有的表单字段属性

除了<fieldset>元素之外所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多种表单字段(由type属性决定),因此有些属性只适用于某些字段。以下罗列出共有的属性

 

属性或方法

说明

disabled

布尔值,表示当前字段是否被禁用

form

指向当前字段所属表单的指针,只读

name

当前字段的名称

readOnly

布尔值,表示当前字段是否只读

tabIndex

表示当前字段的切换

type

当前字段的类型

value

当前字段的值

 

这些属性其实就是HTML表单里的属性,在XHTML相关知识中有详细介绍(自行查阅),这里不作赘述,重点看几个最常用的:

fm.elements[0].value;                                       //获取和设置value

fm.elements[0].form == fm;                              //查看当前字段所属表单

fm.elements[0].disabled = true;                          //禁用当前字段

fm.elements[0].type = ‘checkbox‘;                      //修改字段类型,极不推荐!

 

除了<fieldset>字段之外,所有表单字段都有type属性对于<input>元素,这个值等于HTML属性的type值。对于非<input>元素,这个type的属性值如下:

非<input>元素的type属性值

元素说明

HTML标签

type属性的值

单选列表

<select>...</select>

select-one

多选列表

<select multiple>...</select>

select-multiple

自定义按钮

<button>...</button>

button

自定义非提交按钮

<button type="button">...</button>

button

自定义重置按钮

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

reset

自定义提交按钮

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

submit

 

PS:<input>和<button>元素的type属性是可以动态修改的,而<select>元素的type属性则是只读的。(在不必要的情况下,建议不修改type)

 

共有的表单字段方法

每个表单字段都有两个方法:foucs()和blur()

方法

说明

focus()

将焦点定位到表单字段里

blur()

从元素中将焦点移走

 

       fm.elements[0].focus();                                     //将焦点移入

       fm.elements[0].blur();                                      //将焦点移出

 

共有的表单字段事件

表单共有的字段事件有以下三种:

事件名

说明

blur

当字段失去焦点时触发

change

对于<input>和<textarea>元素,在改变value并失去焦点时触发;对于<select>元素,在改变选项时触发

focus

当前字段获取焦点时触发

 

       addEvent(textField, ‘focus‘, function () {             //缓存blur和change再测试一下

              alert(‘Mr.Lee‘);

       });

 

PS:关于blur和change事件的关系,并没有严格的规定。在某些浏览器中,blur事件会先于change事件发生;而在其他浏览器中,则恰好相反。

 

---恢复内容结束---

为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面。

 发文不易,转载请亲注明出处,谢谢!

一.表单介绍

在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement,因此它拥有HTML元素具有的默认属性,并且还独有自己的属性和方法:

 

HTMLFormElement属性和方法

属性或方法

说明

acceptCharset

服务器能够处理的字符集

action

接受请求的URL

elements

表单中所有控件的集合

enctype

请求的编码类型

length

表单中控件的数量

name

表单的名称

target

用于发送请求和接受响应的窗口名称

reset()

将所有表单重置

submit()

提交表单

 

获取表单<form>对象的方法有很多种,如下:

document.getElementById(‘myForm‘);                //使用ID获取<form>元素

document.getElementsByTagName(‘form‘)[0];     //使用获取第一个元素方式获取 

document.forms[0];                                                 //使用forms的数字下标获取元素

document.forms[‘yourForm‘];                                   //使用forms的名称下标获取元素

document.yourForm;                                        //使用name名称直接获取元素(不推荐)

 

PS:最后一种方法使用name名称直接获取元素,已经不推荐使用,这是向下兼容的早期用法。问题颇多,比如有两个相同名称的,变成数组;而且这种方式以后有可能会不兼容。

 

提交表单

通过事件对象,可以阻止submit的默认行为,submit事件的默认行为就是携带数据(默认以get方式)跳转到指定页面(默认为本页)。

       addEvent(fm, ‘submit‘, function (evt) {      //注意是在form对象上触发submit事件

              preDef(evt);

       });

 

PS:submit事件,用传统的方式:fm.onsubmit = function () {}

PS:必须把submit事件绑定到form对象上,才可以触发submit事件,只不过触发submit事件的流程是点击input中的submit按钮而已。

 

我们可以使用submit()方法来自定义触发submit事件,也就是说,并不一定非要点击submit按钮才能提交。示例代码如下:

//实现ctrl+enter实现提交

      

1  addEvent(document, ‘keydown‘, function (evt) {
2 
3               var e = evt || window.event;
4 
5               if (e.ctrlKey && e.keyCode == 13)  fm.submit();
6 
7        });

 

PS:在表单中尽量避免使用name="submit"或id="submit"等命名,这会和submit()方法发生冲突导致无法提交。

 

提交数据最大的问题就是重复提交表单。因为各种原因,当一条数据提交到服务器的时候会出现延迟等长时间没反映,导致用户不停的点击提交,从而使得重复提交了很多相同的请求,或造成错误、或写入数据库多条相同信息。

//模拟延迟

      

 1  addEvent(fm, ‘submit‘, function (evt) {              
 2 
 3               preDef(evt);     //先阻止提交
 4 
 5               setTimeout(function () {
 6 
 7                      fm.submit();      //提交
 8 
 9               }, 3000);    //3秒钟之后才发送数据(延迟就可能会导致,用户不停地点击提交)
10 
11        });

 

有两种方法可以解决这种问题:

第一种就是提交之后,立刻禁用点击按钮;

第二种就是提交之后取消后续的表单提交操作。

法1:

document.getElementById(‘sub‘).disabled = true;              //将按钮禁用(仅限于使用提交按钮进行提交的形式)

 

法2:

 1 var fm = document.getElementById(‘myForm‘);
 2 
 3 var flag = false;                                                 //设置一个监听变量
 4 
 5 addEvent(fm, ‘submit‘, function (evt) {
 6 
 7               preDef(evt);
 8 
 9               if (flag == true)  return;                     //如果存在返回退出事件
10 
11               flag = true;            //否则确定是第一次,设置为true,表示我提交过一次了
12 
13               alert(‘提交‘);
14 
15               setTimeout(function () {
16 
17                      fm.submit();
18 
19               }, 3000);
20 
21        });
22 
23  

 

PS:在某些浏览器,F5只能起到缓存刷新的效果(浅刷新),有可能获取不到真正的源头更新的数据。那么使用ctrl+F5就可以把源头给刷出来。

重置表单

用户点击重置按钮时,表单会被初始化。虽然这个按钮还得以保留,但目前的Web已经很少去使用了因为用户已经填写好各种数据,不小心点了重置就会全部清空,用户体验极差。

有两种方法调用reset事件:

第一个就是直接type="reset"即可;

第二个就是使用fm.reset()方法调用即可。

法1:

<input type="reset" value="http://www.mamicode.com/重置" />                  //不需要JS代码即可实现

 

法2:

       addEvent(document,‘click‘, function () {

              fm.reset();                                                //使用JS方法实现重置

       });                

 

表单字段

如果想访问表单元素,可以使用之前章节讲到的DOM方法访问。但使用原生的DOM访问虽然比较通用,但不是很便利。表单处理中,我们建议使用HTML DOM,它有自己的elements属性该属性是表单中所有元素的集合

PS:表单控件是什么? form里面的input,submit,textarea,select 这些叫做表单控件,其实就是表单元素标签,通过表单元素集合获取第一个元素,非表单控件会被忽略掉。

fm.elements[0];                                                //获取第一个表单字段元素

fm.elements[‘user‘];                                           //获取name是user的表单字段元素

fm.elements.length;                                                 //获取所有表单字段的数量

 

如果多个表单字段都使用同一个name,那么就会返回该name的NodeList表单列表。

fm.elements[‘sex‘];                                            //获取相同name表单字段列表         

 

PS:我们是通过fm.elements[0]来获取第一个表单字段的,但也可以使用fm[0]直接访问第一个字段。因为fm[0]访问方式是为了向下兼容的,所以,我们建议大家使用elements属性来获取。

 

共有的表单字段属性

除了<fieldset>元素之外所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多种表单字段(由type属性决定),因此有些属性只适用于某些字段。以下罗列出共有的属性

 

属性或方法

说明

disabled

布尔值,表示当前字段是否被禁用

form

指向当前字段所属表单的指针,只读

name

当前字段的名称

readOnly

布尔值,表示当前字段是否只读

tabIndex

表示当前字段的切换

type

当前字段的类型

value

当前字段的值

 

这些属性其实就是HTML表单里的属性,在XHTML相关知识中有详细介绍(自行查阅),这里不作赘述,重点看几个最常用的:

fm.elements[0].value;                                       //获取和设置value

fm.elements[0].form == fm;                              //查看当前字段所属表单

fm.elements[0].disabled = true;                          //禁用当前字段

fm.elements[0].type = ‘checkbox‘;                      //修改字段类型,极不推荐!

 

除了<fieldset>字段之外,所有表单字段都有type属性对于<input>元素,这个值等于HTML属性的type值。对于非<input>元素,这个type的属性值如下:

非<input>元素的type属性值

元素说明

HTML标签

type属性的值

单选列表

<select>...</select>

select-one

多选列表

<select multiple>...</select>

select-multiple

自定义按钮

<button>...</button>

button

自定义非提交按钮

<button type="button">...</button>

button

自定义重置按钮

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

reset

自定义提交按钮

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

submit

 

PS:<input>和<button>元素的type属性是可以动态修改的,而<select>元素的type属性则是只读的。(在不必要的情况下,建议不修改type)

 

共有的表单字段方法

每个表单字段都有两个方法:foucs()和blur()

方法

说明

focus()

将焦点定位到表单字段里

blur()

从元素中将焦点移走

 

       fm.elements[0].focus();                                     //将焦点移入

       fm.elements[0].blur();                                      //将焦点移出

 

共有的表单字段事件

表单共有的字段事件有以下三种:

事件名

说明

blur

当字段失去焦点时触发

change

对于<input>和<textarea>元素,在改变value并失去焦点时触发;对于<select>元素,在改变选项时触发

focus

当前字段获取焦点时触发

 

       addEvent(textField, ‘focus‘, function () {             //缓存blur和change再测试一下

              alert(‘Mr.Lee‘);

       });

 

PS:关于blur和change事件的关系,并没有严格的规定。在某些浏览器中,blur事件会先于change事件发生;而在其他浏览器中,则恰好相反。

未完待续······(下一篇:JavaScript表单处理(下)http://www.cnblogs.com/ttcc/p/3772024.html