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 相关文章推荐
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
Vue3为什么这么快
Sep 23 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.MVC的模板标签系统(五)
2006/09/05 PHP
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
js查找父节点的简单方法
2008/06/28 Javascript
Javascript select下拉框操作常用方法
2009/11/09 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
django 信号调度机制详解
2019/07/19 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
2014村务公开实施方案
2014/02/25 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
卖房协议书样本
2014/10/30 职场文书
九华山导游词
2015/02/03 职场文书
培训通知
2015/04/17 职场文书
2015年人事科工作总结
2015/04/28 职场文书
调解书格式范本
2015/05/20 职场文书
博士论文答辩开场白
2015/06/01 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
java版 联机五子棋游戏
2022/05/04 Java/Android