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 相关文章推荐
JS逆序遍历实现代码
Dec 02 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
关于javascript作用域的常见面试题分享
Jun 18 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
JavaScript中的this基本问题实例小结
Mar 09 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实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
php单例模式示例分享
2015/02/12 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
用JavaScript隐藏控件的方法
2009/09/21 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
javascript history对象详解
2017/02/09 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
用pickle存储Python的原生对象方法
2017/04/28 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
Python 监测文件是否更新的方法
2019/06/10 Python
Django 路由控制的实现
2019/07/17 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
酒吧总经理岗位职责
2013/12/10 职场文书
土地租赁意向书
2014/07/30 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
教师辞职信范文
2015/02/28 职场文书
中学生自我评价范文
2015/03/03 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript