JavaScript表单处理（上）

首页 > 代码库 > JavaScript表单处理（上）

2024-07-07 06:44:33 226人阅读

为了分担服务器处理表单的压力，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事件发生；而在其他浏览器中，则恰好相反。

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