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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
IE JS编程需注意的内存释放问题
Jun 23 Javascript
javascript instanceof,typeof的区别
Mar 24 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
PHP中串行化用法示例
2016/11/16 PHP
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
使用FormData实现上传多个文件
2018/12/04 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
npm qs模块使用详解
2020/02/07 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
Python中规范定义命名空间的一些建议
2016/06/04 Python
Python编码类型转换方法详解
2016/07/01 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
几个MySql的面试题
2013/04/22 面试题
高三毕业评语
2014/12/31 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
女性健康讲座主持词
2015/07/04 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android