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 限制输入脚本大全
Nov 03 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
JSONObject使用方法详解
Dec 17 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
五句话帮你轻松搞定js原型链
Dec 09 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
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技巧小贴士之下篇
2007/03/22 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
js控制框架刷新
2008/08/01 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
python构建基础的爬虫教学
2018/12/23 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
5款实用的python 工具推荐
2020/10/13 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
英格兰足协官方商店:England Store
2019/07/12 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
班主任评语大全
2014/04/26 职场文书
经济类毕业生求职信
2014/06/26 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
云台山导游词
2015/02/03 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript