JavaScript DOM学习第六章 表单实例


Posted in Javascript onFebruary 19, 2010

表单实例
这是一个表单的实力。这里有一个小问题:因为我的服务器现在不支持,所以表单不能提交。我会打印出你的输入,然后返回一个false,这样表单就没有被提交。
onSubmit的代码做了两件事情:检查你是否在四个文本框里面都填写了数据,然后把所有的元素都连接起来打印在下面的文本区域中。
原文中有实例,需要童鞋请移步,我就不搬过来了。
检测文本区域
这段代码会检测用户是否在文本框内输入了内容。他会忽略复选框和单选框,但是会总提醒用户选择select box,就算你选了,也会提醒,因为他的值总是null。所以最好在你只是用来检测文本段的时候使用这段代码。

function checkscript() { 
    for (i=0;i<4;i++) { 
        box = document.example.elements[i]; 
        if (!box.value) { 
            alert('You haven\'t filled in ' + box.name + '!'); 
            box.focus() 
            return false; 
        } 
    } 
    return true; 
}

在这个例子中,我想检查0--3号元素,所以我设置一个变量i。你会注意到,我使用的是数字而不是使用name。这个就是数字好过name的一个例子。
for (i=0;i<4;i++) {

然后我创建一个变量box,用来访问当前元素。如果不创建的话,我就需要把document.example.elements[i]写上好几遍,我可懒得写。
box = document.example.elements[i];

如果这个文本框的值为空,那么我们就需要做:
if (!box.value) {

首先我们使用文本框的name,如果你的命名比较明白,那么用户也会比较好理解是哪个文本框除了问题。
alert('You haven\'t filled in ' + box.name + '!');

作为一个附加服务,我们把焦点放置在有问题的文本框上,这样用户就能够马上填写了。因为所有的浏览器都支持,所以也不需要做检测:
box.focus()

然后我们返回一个false。代码停止运行,表单也不会提交。等待用户输入。
return false;

如果所有的文本框都填写了,返回true,以表示一切正常。函数停止,表单提交。
} 
} 
return true;

翻译地址:http://www.quirksmode.org/js/formex.html
转载请保留以下信息
作者:北玉(tw:@rehawk)
Javascript 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
javascript 模式设计之工厂模式学习心得
Apr 27 Javascript
js中关于String对象的replace使用详解
May 24 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
新手如何快速理解js异步编程
Jun 24 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 #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
You might like
PHP中防止SQL注入实现代码
2011/02/19 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
做网页的一些技巧(续)
2007/02/01 Javascript
驱动事件的addEvent.js代码
2007/03/27 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
vue中监听返回键问题
2019/08/28 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
对Django中内置的User模型实例详解
2019/08/16 Python
Python的Lambda函数用法详解
2019/09/03 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
python操作toml文件的示例代码
2020/11/27 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
工厂车间标语
2014/06/19 职场文书
出差报告怎么写
2014/11/06 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers