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中Math对象方法使用概述
Jan 02 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
jquery获取节点名称
Apr 26 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
JS实现瀑布流布局
Oct 21 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 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中与数组相关的函数
2007/03/22 PHP
PHP 文件上传限制问题
2019/09/01 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
python对象及面向对象技术详解
2016/07/19 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
python实现单链表的方法示例
2019/09/03 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
阿里云:Aliyun.com
2017/02/15 全球购物
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
结构和类有什么异同
2012/07/16 面试题
逻辑链路控制协议
2016/10/01 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
保安辞职信范文
2015/02/28 职场文书
中学教师读书笔记
2015/07/01 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python
Python访问Redis的详细操作
2021/06/26 Python
关于Python中进度条的六个实用技巧分享
2022/04/05 Python