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实现运行代码需要刷新的解决方法
Aug 18 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
JSONP原理及简单实现
Jun 08 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php中异常处理方法小结
2015/01/09 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
vue.js实现备忘录功能的方法
2017/07/10 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
python开发之thread实现布朗运动的方法
2015/11/11 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
为什么要有struct关键字
2012/05/08 面试题
综合测评自我鉴定
2013/10/08 职场文书
兴趣小组活动总结
2014/05/05 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
十二生肖观后感
2015/06/12 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
python元组打包和解包过程详解
2021/08/02 Python