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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
javascript如何实现create方法
Nov 04 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
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
js格式化时间小结
2014/11/03 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
光声世纪笔试题目
2012/08/25 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
车间班组长的职责
2013/12/13 职场文书
创文明城市标语
2014/06/16 职场文书
frg-100简单操作(设置)说明
2022/04/05 无线电