JavaScript DOM学习第六章 表单实例
2010-02-19 00:00
489 查看
表单实例
这是一个表单的实力。这里有一个小问题:因为我的服务器现在不支持,所以表单不能提交。我会打印出你的输入,然后返回一个false,这样表单就没有被提交。
onSubmit的代码做了两件事情:检查你是否在四个文本框里面都填写了数据,然后把所有的元素都连接起来打印在下面的文本区域中。
原文中有实例,需要童鞋请移步,我就不搬过来了。
检测文本区域
这段代码会检测用户是否在文本框内输入了内容。他会忽略复选框和单选框,但是会总提醒用户选择select box,就算你选了,也会提醒,因为他的值总是null。所以最好在你只是用来检测文本段的时候使用这段代码。
在这个例子中,我想检查0--3号元素,所以我设置一个变量i。你会注意到,我使用的是数字而不是使用name。这个就是数字好过name的一个例子。
然后我创建一个变量box,用来访问当前元素。如果不创建的话,我就需要把document.example.elements[i]写上好几遍,我可懒得写。
如果这个文本框的值为空,那么我们就需要做:
首先我们使用文本框的name,如果你的命名比较明白,那么用户也会比较好理解是哪个文本框除了问题。
作为一个附加服务,我们把焦点放置在有问题的文本框上,这样用户就能够马上填写了。因为所有的浏览器都支持,所以也不需要做检测:
然后我们返回一个false。代码停止运行,表单也不会提交。等待用户输入。
如果所有的文本框都填写了,返回true,以表示一切正常。函数停止,表单提交。
翻译地址:http://www.quirksmode.org/js/formex.html
转载请保留以下信息
作者:北玉(tw:@rehawk)
这是一个表单的实力。这里有一个小问题:因为我的服务器现在不支持,所以表单不能提交。我会打印出你的输入,然后返回一个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 DOM学习第六章 表单实例
- 【翻译作品】JavaScript DOM学习第六章:表单实例
- jQuery学习第七课(jquery表单实例)
- AngularJS学习笔记之表单验证功能实例详解
- 【javascript】学习总结——表单验证实例
- 一步步学习微软InfoPath2010和SP2010--第一章节--介绍InfoPath2010(8)--使用模板创建表单实例
- 实例学习 PHP 之表单处理篇(一)
- jquery中dom操作和事件的实例学习-表单验证
- Vue.js实例学习:表单输入绑定
- php学习笔记(十六)登录页面实例-输入检查和粘性表单
- PHP 学习笔记(二):表单:表单处理,表单验证,表单实例
- 第六章 ASP.NET应用实例 -- 学习笔记
- PE学习(六)第六章 栈与重定位表 实例栈溢出、模拟加载器加载DLL、遍历重定位表
- jquery中dom操作和事件的实例学习-表单验证
- 一步一步学习Ultimus - 八、流程设计实例_(精简表单)
- WEB表格和表单学习实例
- Spring学习笔记2之表单数据验证、文件上传实例代码
- ■ 实例学习 PHP 之表单处理篇
- jsp,servlet学习--实例:输出所有的表单数据
- JavaScript DOM学习第八章 表单错误提示