JavaScript DOM 学习第五章 表单简介


Posted in Javascript onFebruary 19, 2010

因为每一个表单的检测项都不同,所以我也不能给你一个万能的代码。你需要用我在这一章介绍的这些元素构建自己的检测函数。我在后面一张还有一个例子,你也可以参考。

在这一章我会首先讨论一下用JavaScript来检测表单的局限性,然后会解释一下提交时间处理程序,然后是表单本身的一些方法和属性。最后就是如何访问表单元素。

这里还有一篇Jeff Howden的介绍表单的使用错误和解决办法。Forms & JavaScript Living Together in Harmony
局限性
首先,你需要了解当用户提交了表单之后JavaScript的检测代码会做什么:
1、JavaScript检测表单时可能会像下面这样。如果代码发现了一个错误,那么提交就会暂停,然后给用户一个警告让他输入正确的数据。
2、如果没有什么错误或者JavaScript是关闭的那么表单内容就发送到服务器端。
3、如果服务器端的脚本发现了错误,就会返回一些错误信息。在这种情形下,用户需要返回表单然后重新填写数据再次提交。
4、如果没有错误发生,那么服务器端完成必要的工作并显示感谢信息。
就像你所看到的,数据在提交过程中会检测两次:一次是JavaScript一次是服务端。服务端检测总是可行的,而且是可靠的。JavaScript的检测只有在用户开启JavaScript功能的时候才有用,那么既然服务端总是可靠有效,并且与用户使用的浏览器无关,那么为什么还需要JavaScript检测呢?
JavaScript检测是服务器端检测的一个有效补充,因为他能在数据发往服务器端的时候先检测一遍。这样用户就不用使用后退按钮回去修改表单内容,那样会很麻烦,而且在寻找填错的内容也是一件相当麻烦的事情。所以JavaScript检测比服务器端检测对用户的使用体验帮助更大。
所以JavaScript不是一个完全的检测机制,但是作为服务器端的补充和对用户的友好性来讲还是一个不错选择。所以我建议使用这两种检测机制,既满足了用户的使用体验要求又保证了程序的安全性。
onsubmit
当你使用JavaScript来检测表单的时候,第一个事情就是创建onsubmit的事件处理程序。这个程序会在用户提交表单的时候运行。这个程序会检测某些字段是否有值填写,那些复选框是否选择了至少一个,或者其他的你需要检测内容。
代码如下:

<form action="something.pl" onsubmit="return checkscript()">

checkscript()就是这个程序的名字。这段代码需要返回true或者false。如果返回的是false,那么表单就不会被提交,不论返回true还是false代码都会停止运行。
所以生成的代码如下:
function checkscript() { 
    if (some value is/is not something) { 
        // something is wrong 
        alert('alert user of problem'); 
        return false; 
    } 
    else if (another value is/is not something) { 
        // something else is wrong 
        alert('alert user of problem'); 
        return false; 
    } 
    // If the script makes it to here, everything is OK, 
    // so you can submit the form 
    return true; 
}

当然这段代码可以写的很复杂,如果你需要检测很多表单项目或者一大堆的单选框。基本思想就是这样了:你遍历表单里的每一个需要检查的元素,如果发现了错误就返回false,然后代码停止运行,表单也不会被提交。
当你发现了错误的时候,你应该提醒用户。可以用一个警告框,不过今天大多数的办法是生成一条错误信息然后添加在错误条目的后面。
只有在最后地方,你检查过了所有的元素并且没有发现错误,那么你就返回true,表单就会被提交。
表单的方法和属性
JavaScript对于处理表单还有一些内建的方法和属性。其中三个比较重要:
你可以用submit()方法来提交表单。提交页面的第一个表单你可以写:
document.forms[0].submit() 
注意当用户使用JavaScript提交表单的时候,表单的事件处理程序就不起作用了。 
重置表单,你可以: 
[code] document.forms[0].reset() 
我假设,没有做测试,你如果使用这个方法,那么重置表单的事件处理程序也就不会执行。 
最后你可以修改表单的ACTION项: 
[code] document.forms[0].action = 'the_other_script.pl'; 
如果表单在某些情况需要提交给其他页面的时候这个方法就相当方便。 
访问表单元素 
表单的有效性检测需要访问到表单的元素才能知道用户填了什么内容进去。所以首先我们需要根据Level 0 DOM来访问表单。一般这样写: 
[code] document.forms[number].elements[number] 
当页面加载之后,JavaScript就会生成一个forms数组用来存储页面上所有的表单。所以第一个表单就是forms[0],第二个就是forms[1]等等。 
JavaScript把表单里面的每个元素也存储进了一个数组。第一个元素就是elements[0],第二个就是elements[1]。所有的input,select,textarea都是一个元素。 
有些时候,最好还是使用表单和元素的name比较好。在HTML中,你需要给每个元素命名,比如: 
[code] <form name="personal" action="something.pl" onsubmit="return checkscript()"> 2 <input type=text size=20 name=name> 3 <input type=text size=20 name=address> 4 <input type=text size=20 name=city> 5 </form> 
现在你就可以通过下面的方法来访问元素: 
[code] document.personal.name 2 document.personal.address 3 document.personal.city 
使用name的好处就在于你能把页面的所有元素顺序打乱的时候代码依然能够运行,如果用数组就不行。比如上面例子中的city的输入框是document.forms[0].elements[2],但是当你把他放在第一个的时候就变成了document.forms[0].element[0],这时候你就得改代码了。 
值的检测 
当然,最重要的事情还是找出用户填进去的值或者选择了的复选框。有些时候你还想填一些其他信息在表单里。 
下面的这些小段的代码能够帮助你访问到表单里的元素。所有的都是把用户输入保存在user_input变量中。之后,你就可以检测有效性了。 
Texts,textarea和隐藏的字段 
非常简单: 
[code] user_input = document.forms[0].text.value

其中text就是文本框或者textarea或者隐藏字段的name。value属性就会给出这些元素的文本,然后存储在user_input里。
直接写也可以:
document.forms[0].text.value = 'The new value';

Select Boxes
这也很简单:
user_input = document.forms[0].select.value;

要更改他的选择项目,就必须修改selectedIndex,比如:
document.forms[0].select.selectedIndex = 2;

现在第三个选项就被选择了。
旧的浏览器
在旧的浏览器里面select boxes没有value属性,那么:
var selectBox = document.forms[0].select; 
user_input = selectBox.options[selectBox.selectedIndex].value

首先找出用户选择了的项目。document.forms[0].select.selectedIndex给出了选择项目的编号。JavaScript已经创建了一个包含所有select boxes选项的options数组。所以通过这个数组就能知道用户选择了什么,然后存储在user_input里面。
checkboxes
checkboxes有一些小小的不同。我们已经知道了他的值,但是需要知道用户是否选择了他。checked属性可以告诉我们。他有true和false两个值。
那么:
if (document.forms[0].checkbox.checked) { 
user_input = document.forms[0].checkbox.name 
}

checkbox是复选框的名字。如果复选框被选择了,我们就得到名字(你也可以选择得到值)然后传递给user_input。
选择一个复选框可以:
document.forms[0].checkbox.checked = true

单选框
不幸的是,你不能一下子就找到哪个单选框被选中了。只能在遍历之后查找checked属性为true的那一项。
for (i=0;i<document.forms[0].radios.length;i++) { 
if (document.forms[0].radios[i].checked) { 
user_input = document.forms[0].radios[i].value; 
} 
}

radios就是这一组单选框的名字。
注意document.forms[0].radios是包含所有单选框的数组,循环检测是否checked的属性为true。如果是则传递个user_input。
document.forms[0].radios.length返回所有单选框的数目。
如果选择一个单选框,我们可以设置它的checked的值为true:
document.forms[0].radios[i].checked = true;

翻译地址:http://www.quirksmode.org/js/forms.html
转载请保留以下信息
作者:北玉(tw:@rehawk)
Javascript 相关文章推荐
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
快速入门Vue
Dec 19 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 #Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 #Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 #Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 #Javascript
JavaScript 题型问答有答案参考
Feb 17 #Javascript
JavaScript 学习技巧
Feb 17 #Javascript
JavaScript Timer实现代码
Feb 17 #Javascript
You might like
新闻分类录入、显示系统
2006/10/09 PHP
php,ajax实现分页
2008/03/27 PHP
PHP 递归效率分析
2009/11/24 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
jquery.validate使用详解
2016/06/02 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
Python实现的knn算法示例
2018/06/14 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
写求职信有哪些注意事项
2014/05/08 职场文书
英语辞职信怎么写
2015/02/28 职场文书