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 相关文章推荐
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 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中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
checkbox使用示例
2013/08/23 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
Python ljust rjust center输出
2008/09/06 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
怎样声明子类
2013/07/02 面试题
策划助理岗位职责
2013/11/18 职场文书
公司市场部岗位职责
2013/12/02 职场文书
小学生读书感言
2014/02/12 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
委托书范本
2014/09/13 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js