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 相关文章推荐
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
jquery手风琴特效插件
Feb 04 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
微信小程序实现刷脸登录
May 25 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 Javascript
vue中使用mockjs配置和使用方式
Apr 06 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
PHP实现文件安全下载
2006/10/09 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
如何保障Web服务器安全
2014/05/05 面试题
个人承诺书
2014/03/26 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
护士医德医风自我评价
2014/09/15 职场文书
公证书格式
2015/01/23 职场文书
2015年国培研修感言
2015/08/01 职场文书
文明上网主题班会
2015/08/14 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python