最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
科技
当前位置： 首页 - 科技 - 知识百科 - 正文

JavaScript表单处理实现代码_基础知识

来源：动视网 责编：小采 时间：2020-11-27 21:36:59
文档

JavaScript表单处理实现代码_基础知识

JavaScript表单处理实现代码_基础知识:一 表单介绍 在HTML中,表单是由元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型; // HTMLFormElement继承了HTMLElement;因此它拥有HTML元素具有的默认属性,别且还独有自己的属性和方法; HTMLFormElement属性和方法 属性
推荐度：
点击下载本文 文档为doc格式
导读JavaScript表单处理实现代码_基础知识:一 表单介绍 在HTML中,表单是由元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型; // HTMLFormElement继承了HTMLElement;因此它拥有HTML元素具有的默认属性,别且还独有自己的属性和方法; HTMLFormElement属性和方法 属性


一 表单介绍

在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事件的默认行为就是携带数据跳转到指定页面;

代码如下:
addEvent(fm,'submit',function(evt){
preDef(evt);
});

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

代码如下:
if(e.ctrlKey && e.keyCode ==13){
fm.submit(); // 判断按住了ctrl和enter键触发提交;
}
// PS:在表单中尽量避免使用name="submit"或id="submit"等命名,这会和submit()方法发生冲突导致无法提交;

(3).重复提交
// 当一条数据提交到服务器的时候会出现延迟等长时间没反映,导致用户不停的点击提交,
// 从而使得重复提交了很多相同的请求,或造成错误或写入数据库多条相同信息;
代码如下:
addEvent(fm,'submit',function(evt){ // 模拟服务器延迟;
preDef(evt);
setTimeout(function(){ // 3秒后才处理提交到服务器;
fm.submit();
},3000);
});

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

3.重置表单




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 对于和