JavaScript 表单处理实现代码

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了JavaScript 表单处理实现代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

一 表单介绍

在HTML中,表单是由

元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型;

// HTMLFormElement继承了HTMLElement;因此它拥有HTML元素具有的默认属性,别且还独有自己的属性和方法;

HTMLFormElement属性和方法

属性或方法 说明 acceptCharset 服务器能够处理的字符集; action 接受请求的URL; elements 表单中所有控件的集合; enctype 请求的编码类型; length 表单中控件的数量; method 要发送的HTTP请求类型,通常是'get'或'post'; name 表单的名称; target 用于发送请求和接受响应的窗口名称; reset() 将所有表单重置; submit() 提交表单;

1.获取表单对象;

document.getElementById('myForm'); // 使用ID获取元素; document.getElementsByTagName('form')[0]; // 使用获取form元素集合里的第一个元素; document.forms[0]; // 使用forms的数字下标获取元素; document.forms['myForm']; // 使用forms的名称下标获取元素;

2.提交表单

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

代码如下:

(2).我们可以使用submit()方法来自定义触发submit事件;也就是说,并不一定非要点击submit按钮才能提交;

代码如下:
方法发生冲突导致无法提交;

(3).重复提交 // 当一条数据提交到服务器的时候会出现延迟等长时间没反映,导致用户不停的点击提交, // 从而使得重复提交了很多相同的请求,或造成错误或写入数据库多条相同信息;

代码如下:

// 解决重复提交方案 // 第一种:提交之后,立刻禁用点击按钮; document.getElementById('sub').disabled = true; // 将按钮禁用; // 第二种:提交之后,取消后续的表单提交操作; var flag = false; // 设置一个监听变量; if(flag == true)return; // 如果存在则返回退出事件; flag = true; // 否则确定是第一次,改变监听变量的值;

3.重置表单

用户点击重置按钮时,表单会被初始化; // 虽然这个按钮还得以保留,但目前Web已经很少去使用了;因为用户填好信息后,不小心点击了重置就会全部清空,用户体验极差; // 有两种方法调用reset事件:第一个就是直接type="reset"即可;第二个就是使用fm.reset()方法调用; // 不需要JS代码即可实现; addEvent(document,'click',function(){ fm.reset(); // 使用JS方法实现重置; });

4.表单字段

// 表单处理中,建议使用HTMLDOM,它有自己的elements属性,该属性是表单中所有元素的集合; fm.elements[0]; // 获取第一个表单字段元素; fm.elements['user']; // 获取name值是user的表单字段元素; fm.elements.length; // 获取所有表单字段的数量;

(1).共有的表单字段属性

// 除了
元素之外,所有表单字段都拥有相同的一组属性; 属性 说明 disabled 布尔值,表示当前字段是否被禁用; form 指向当前字段所属表单的指针,只读; name 当前字段的名称; readOnly 布尔值,表示当前字段是否只读; tabIndex 表示当前字段的切换; type 当前字段的类型; value 当前字段的值; fm.elements[0].value; // 获取和设置value; fm.elements[0].disabled = true; // 禁用当前字段;

(2).共有的表单字段方法

方法 说明 focus() 将焦点定位到表单字段里; blur() 从元素中将焦点移走;

(3).共有的表单字段事件

事件名 说明 blur 当字段失去焦点时触发; change 对于和