JavaScript 表单处理实现代码(javascript给表单赋值)

推荐整理分享JavaScript 表单处理实现代码(javascript给表单赋值)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js处理表单数据,js提交form表单action,js中表单,js表单事件有哪些,javascript 表格,js表单事件有哪些,javascript给表单赋值,用javascript写表单代码,内容如对您有帮助，希望把文章链接给更多的朋友！

一 表单介绍

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

// HTMLFormElement继承了HTMLElement;因此它拥有HTML元素具有的默认属性,别且还独有自己的属性和方法;HTMLFormElement属性和方法属性或方法 说明acceptCharset 服务器能够处理的字符集;action 接受请求的URL;elements 表单中所有控件的集合;enctype 请求的编码类型;length 表单中控件的数量;method 要发送的HTTP请求类型,通常是'get'或'post';name 表单的名称;target 用于发送请求和接受响应的窗口名称;reset() 将所有表单重置;submit() 提交表单;

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

2.提交表单

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

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

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

3.重置表单

4.表单字段

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

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

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

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

事件名 说明blur 当字段失去焦点时触发;change 对于<input>和<textarea>元素,在改变value并失去焦点时触发;对于<select>元素,在改变选项时触发;focus 当前字段获取焦点时触发;

二 文本框脚本// 在HTML中,有两种方式来表现文本框:

// 一种是单行文本框<input type="text">;

// 一种是多行文本框<textarea>;

1.获取value值

// 虽然<input>在字面上有value值,而<textarea>却没有,但可以通过value获取它们的值; var textField = fm.elements[0]; var areaField = fm.elements[1]; alert(textField.value+','+areaField.value); // 得到<input>和<textarea>的value值; // PS:使用表单的value是最推荐的,它是HTMLDOM中的属性,不建议使用标准的DOM的方法getAttribute(); // 原因是:对value属性的修改,不一定反映在DOM中;

// defaultValue:得到原本的value值;不会因为值的改变而变化; alert(textField.defaultValue); // 得到最初设置的value值;

2.选择文本

3.过滤输入

4.自动切换焦点

三 选择框脚本

选择框是通过<select>和<option>元素创建的;

HTMLSelectElement对象

属性/方法 说明add(new,rel) 插入新元素,并指定位置;multiple 布尔值,是否允许多项选择;options <option>元素的HTMLCollection集合;remove(index) 移除给定位置的选项;selectedIndex 基于0的选中项的索引,如果没有选中项,则值为-1;size 选择框中可见的行数;

// 在DOM中,每个<option>元素都有一个HTMLOptionElement对象,以便访问数据;HTMLOptionElement对象属性 说明 index 当前选项在options集合中的索引;label 当前选项的标签;selected 布尔值,表示当前选项是否被选中;text 选项的文本;value 选项的值;

2.选择选项

对于只能选择一项的选择框,使用selectedIndex属性最为简单;

通过option的属性selected(布尔值),也可以设置定位某个索引,设置为true即可; city.options[0].selected = true; // 设置第一个索引;

selected和selectedIndex区别:1.selected是返回的布尔值;所以一般用于判断上;2.selectedIndex返回的是数值,一般用于设置和获取;

3.添加选项// 如需要动态的添加选项,我们提供两种方案:DOM和Option构造函数;(1).DOMvar option = document.createElement('option');option.appendChild(document.createTextNode('北京 text'));option.setAttribute('value','北京 value');city.appendChild(option);

(2).Option构造函数 var option = new Option('北京 text','北京 value');city.appendChild(option); // IE出现bug;

(3).使用add()方法来添加选项:var option = new Option('北京 text','北京 value');city.add(option,0); // 0,表示添加到第一位;// PS:在DOM规定,add()中两个参数是必须的,如果不正确索引,那么第二个参数设置null即可,即默认移入最后一个选项;// 但在IE中第二个参数是可选的,所以设置null表示放入不存在的位置,导致失踪;// 为了兼容性,可以传递undefined即可兼容;city.add(option,null); // IE不显示了;city.add(option,undefined); // 兼容;

4.移除选项

5.移动选项

6.排列选项

选择框提供了一个index属性,可以得到当前选项的索引值,和selectedIndex的区别是,一个是选择框对象的调用,一个是选项对象的调用;

7.单选按钮

8.复选按钮

javascript实现的图片切割多块效果实例 本文实例讲述了javascript实现的图片切割多块效果。分享给大家供大家参考。具体实现方法如下：!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""

Javascript中arguments和arguments.callee的区别浅析 通过一个例子来理解下arguments与arguments.callee的具体区别：代码如下：scripttype="text/javascript"functioncheck(args){varac=args.length;varex=args.callee.length;document.write("ac

ECMAScript5(ES5)中bind方法使用小结 一直以来对和this有关的东西模糊不清，譬如call、apply等等。这次看到一个和bind有关的笔试题，故记此文以备忘。bind和call以及apply一样，都是可以改变