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 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
使用canvas进行图像编辑的实例
Aug 29 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
vue实现扫码功能
Jan 17 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
mysql时区问题
2008/03/26 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
python批量修改文件后缀示例代码分享
2013/12/24 Python
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
python3实现mysql导出excel的方法
2019/07/31 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
python实现经典排序算法的示例代码
2021/02/07 Python
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
电气专业应届生求职信
2013/11/01 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
读书笔记格式
2015/07/02 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python