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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 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 在线打包_支持子目录
2008/06/28 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
js获取ip和地区
2017/03/10 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python生成密码库功能示例
2017/05/23 Python
python重试装饰器的简单实现方法
2019/01/31 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
夜班门卫岗位职责
2013/12/09 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
二婚主持词
2015/06/30 职场文书
升学宴祝酒词
2015/08/11 职场文书
2015年国庆节寄语
2015/08/17 职场文书
六年级数学教学反思
2016/02/16 职场文书
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle