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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
js操作select控件的几种方法
Jun 02 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
javascript实现下雨效果
2017/03/27 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
js制作提示框插件
2020/12/24 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
极简的Python入门指引
2015/04/01 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
常见的python正则用法实例讲解
2016/06/21 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
python读写文件write和flush的实现方式
2020/02/21 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
新郎父亲婚宴答谢词
2014/01/11 职场文书
创业资金计划书
2014/02/06 职场文书
《都江堰》教学反思
2014/02/07 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL