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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
js实现简易计算器小功能
Nov 18 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
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的curl封装类用法实例
2014/11/07 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
PHP中的类型约束介绍
2015/05/11 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
python实现百度关键词排名查询
2014/03/30 Python
json跨域调用python的方法详解
2017/01/11 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python实现决策树分类(2)
2018/08/30 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
详解Python实现进度条的4种方式
2020/01/15 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
行政助理岗位职责
2013/11/10 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
职业生涯规划书前言
2014/04/15 职场文书
企业宗旨标语
2014/06/10 职场文书
Python anaconda安装库命令详解
2021/10/16 Python