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实现提交
addEvent(document, 'keydown', function (evt) { var e = evt || window.event; if (e.ctrlKey && e.keyCode == 13) fm.submit(); });
PS:在表单中尽量避免使用name="submit"或id="submit"等命名,这会和submit()方法发生冲突导致无法提交。
提交数据最大的问题就是重复提交表单。因为各种原因,当一条数据提交到服务器的时候会出现延迟等长时间没反映,导致用户不停的点击提交,从而使得重复提交了很多相同的请求,或造成错误、或写入数据库多条相同信息。
//模拟延迟
addEvent(fm, 'submit', function (evt) { preDef(evt); //先阻止提交 setTimeout(function () { fm.submit(); //提交 }, 3000); //3秒钟之后才发送数据(延迟就可能会导致,用户不停地点击提交) });
有两种方法可以解决这种问题:
第一种就是提交之后,立刻禁用点击按钮;
第二种就是提交之后取消后续的表单提交操作。
法1:
document.getElementById('sub').disabled = true; //将按钮禁用(仅限于使用提交按钮进行提交的形式)
法2:
var fm = document.getElementById('myForm'); var flag = false; //设置一个监听变量 addEvent(fm, 'submit', function (evt) { preDef(evt); if (flag == true) return; //如果存在返回退出事件 flag = true; //否则确定是第一次,设置为true,表示我提交过一次了 alert('提交'); setTimeout(function () { fm.submit(); }, 3000); });
PS:在某些浏览器,F5只能起到缓存刷新的效果(浅刷新),有可能获取不到真正的源头更新的数据。那么使用ctrl+F5就可以把源头给刷出来。
重置表单
用户点击重置按钮时,表单会被初始化。虽然这个按钮还得以保留,但目前的Web已经很少去使用了。因为用户已经填写好各种数据,不小心点了重置就会全部清空,用户体验极差。
有两种方法调用reset事件:
第一个就是直接type="reset"即可;
第二个就是使用fm.reset()方法调用即可。
法1:
<input type="reset" value="重置" /> //不需要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实现提交
addEvent(document, 'keydown', function (evt) { var e = evt || window.event; if (e.ctrlKey && e.keyCode == 13) fm.submit(); });
PS:在表单中尽量避免使用name="submit"或id="submit"等命名,这会和submit()方法发生冲突导致无法提交。
提交数据最大的问题就是重复提交表单。因为各种原因,当一条数据提交到服务器的时候会出现延迟等长时间没反映,导致用户不停的点击提交,从而使得重复提交了很多相同的请求,或造成错误、或写入数据库多条相同信息。
//模拟延迟
addEvent(fm, 'submit', function (evt) { preDef(evt); //先阻止提交 setTimeout(function () { fm.submit(); //提交 }, 3000); //3秒钟之后才发送数据(延迟就可能会导致,用户不停地点击提交) });
有两种方法可以解决这种问题:
第一种就是提交之后,立刻禁用点击按钮;
第二种就是提交之后取消后续的表单提交操作。
法1:
document.getElementById('sub').disabled = true; //将按钮禁用(仅限于使用提交按钮进行提交的形式)
法2:
var fm = document.getElementById('myForm'); var flag = false; //设置一个监听变量 addEvent(fm, 'submit', function (evt) { preDef(evt); if (flag == true) return; //如果存在返回退出事件 flag = true; //否则确定是第一次,设置为true,表示我提交过一次了 alert('提交'); setTimeout(function () { fm.submit(); }, 3000); });
PS:在某些浏览器,F5只能起到缓存刷新的效果(浅刷新),有可能获取不到真正的源头更新的数据。那么使用ctrl+F5就可以把源头给刷出来。
重置表单
用户点击重置按钮时,表单会被初始化。虽然这个按钮还得以保留,但目前的Web已经很少去使用了。因为用户已经填写好各种数据,不小心点了重置就会全部清空,用户体验极差。
有两种方法调用reset事件:
第一个就是直接type="reset"即可;
第二个就是使用fm.reset()方法调用即可。
法1:
<input type="reset" value="重置" /> //不需要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)
JavaScript表单处理(上)的更多相关文章
- 第一百二十二节,JavaScript表单处理
JavaScript表单处理 学习要点: 1.表单介绍 2.文本框脚本 3.选择框脚本 为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面. 一. ...
- JavaScript表单
JavaScript表单 这篇文章的主要目的是介绍表单相关的知识,如表单基础知识.文本框脚本相关用法.选择框脚本相关用法以及等知识.虽然在现代web开发中,很少会使用form默认行为提交表单数据,而是 ...
- 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- 表单文件上传,ajax文件上传
原创链接:http://www.cnblogs.com/yanqin/p/5345562.html html代码 index.jsp(表单文件上传) <form action="sh ...
- 推荐几款很棒的 JavaScript 表单美化和验证插件
表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...
- JavaScript表单提交四种方式
总结JavaScript表单提交四种方式 <!DOCTYPE html> <html> <head> <title>JavaScript表单提交四种方式 ...
- JavaScript表单验证年龄
JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现. //检查年龄 function isAge(str){ var mydate=new Date; var now=m ...
- 前端工具 - 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- JavaScript表单验证和正则表达式
JavaScript表单验证 分为四类: 1.非空验证 常用于用户名等 2.相等验证 常用于验证两次输入的密码 3.范围验证 常用于年龄等 4.正则验证 用于手机号,邮箱号等 以下是实例: <! ...
随机推荐
- WCF 删除队列
Configuration config = ConfigurationManager.OpenExeConfiguration (ConfigurationUserLevel.None); Serv ...
- Linux下的C之2048
#include <stdio.h> #include <stdlib.h> #include <curses.h> #include <time.h> ...
- UESTC 884 方老师的专题讲座 --数位DP
定义:cnt[L][K]表示长度为L,最高位为K的满足条件C的个数. 首先预处理出cnt数组,枚举当前长度最高位和小一个长度的最高位,如果相差大于2则前一个加上后一个的方法数. 然后给定n,计算[1, ...
- ssm中使用hibernate-validator验证BO
目前比较流行的验证做法:前端jquery-form-validate + 后端hibernate-validate 在pom中添加相关jar: <!-- use hibernate-valida ...
- 一款免费好用的正则表达式工具:Regex Match Tracer
推荐分享:一款免费好用的正则表达式工具:Regex Match Tracer v2.1.5 free version 下载地址:Regex Match Tracer
- 关于软件测试人员能力模型的建立(from知乎)
转自: http://www.zhihu.com/question/20254092 测试思维方面:1.测试基础理论(测试流程.测试的基础知识)2.测试用例设计方法论(黑盒.白盒)3.软件质量体系(建 ...
- git 添加文件
git 添加文件三步骤 git add filename git commit -m 'remarks' git push origin master
- 对window的认识
首先要明确: 不管是全局的函数还是全局的变量,都是属于window的,例如: a = 12; //全局变量 alert(a) === alert(window.a) function show(){ ...
- 014医疗项目-模块一:删除用户的功能l
删除用户的功能我们还是按照:Dao->Service->Action->页面调试这种顺序来写. Dao: 我们使用逆向工程生成的方法就好: SysuserMapper sysuser ...
- Managing the Lifecycle of a Service
service的生命周期,从它被创建开始,到它被销毁为止,可以有两条不同的路径: A started service 被开启的service通过其他组件调用 startService()被创建. 这种 ...