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 相关文章推荐
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
微信小程序如何获取用户手机号
Jan 26 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 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
浅谈php://filter的妙用
2019/03/05 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
canvas实现钟表效果
2017/02/13 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
Python探索之SocketServer详解
2017/10/28 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
C#公司笔试题
2014/03/28 面试题
男方父母婚礼答谢词
2014/01/25 职场文书
给领导的检讨书
2014/02/16 职场文书
库房管理员岗位职责
2014/03/09 职场文书
股份转让协议书
2014/04/12 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
会计简历自我评价
2015/03/10 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers