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学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
JavaScript随机数的组合问题案例分析
May 16 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数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
jquery连缀语法如何实现
2012/11/29 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
一看就懂:jsonp详解
2015/06/01 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
python使用str &amp; repr转换字符串
2016/10/13 Python
pandas中去除指定字符的实例
2018/05/18 Python
python中scikit-learn机器代码实例
2018/08/05 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
详解python datetime模块
2020/08/17 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
机关财务管理制度
2014/01/17 职场文书
村安全生产责任书
2014/08/25 职场文书
保管员岗位职责
2015/02/14 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python