开发学院网页设计JavaScript JavaScript DOM学习第六章:表单实例 阅读

JavaScript DOM学习第六章:表单实例

 2010-03-30 00:00:00 来源:WEB开发网   
核心提示:表单实例这是一个表单的实力,这里有一个小问题:因为我的服务器现在不支持,JavaScript DOM学习第六章:表单实例,所以表单不能提交,我会打印出你的输入,以表示一切正常,函数停止,然后返回一个false,这样表单就没有被提交

表单实例

这是一个表单的实力。这里有一个小问题:因为我的服务器现在不支持,所以表单不能提交。我会打印出你的输入,然后返回一个false,这样表单就没有被提交。

onSubmit的代码做了两件事情:检查你是否在四个文本框里面都填写了数据,然后把所有的元素都连接起来打印在下面的文本区域中。

原文中有实例,需要童鞋请移步,我就不搬过来了。

检测文本区域

这段代码会检测用户是否在文本框内输入了内容。他会忽略复选框和单选框,但是会总提醒用户选择select box,就算你选了,也会提醒,因为他的值总是null。所以最好在你只是用来检测文本段的时候使用这段代码。

01 function checkscript() {
02     for (i=0;i<4;i++) {
03         box = document.example.elements[i];
04         if (!box.value) {
05             alert('You haven\'t filled in ' + box.name + '!');
06             box.focus()
07             return false;
08         }
09     }
10     return true;
11 }

在这个例子中,我想检查0--3号元素,所以我设置一个变量i。你会注意到,我使用的是数字而不是使用name。这个就是数字好过name的一个例子。

1 for (i=0;i<4;i++) {

然后我创建一个变量box,用来访问当前元素。如果不创建的话,我就需要把document.example.elements[i]写上好几遍,我可懒得写。

1 box = document.example.elements[i];

如果这个文本框的值为空,那么我们就需要做:

1 if (!box.value) {

首先我们使用文本框的name,如果你的命名比较明白,那么用户也会比较好理解是哪个文本框除了问题。

1 alert('You haven\'t filled in ' + box.name + '!');

作为一个附加服务,我们把焦点放置在有问题的文本框上,这样用户就能够马上填写了。因为所有的浏览器都支持,所以也不需要做检测:

1 box.focus()

然后我们返回一个false。代码停止运行,表单也不会提交。等待用户输入。

1 return false;

如果所有的文本框都填写了,返回true,以表示一切正常。函数停止,表单提交。

1     }
2 }
3 return true;

翻译地址:http://www.quirksmode.org/js/formex.html

文章出处:http://beiyu.cnblogs.com

编缉推荐阅读以下文章

  • JavaScript DOM学习第五章:表单简介
  • JavaScript DOM学习第四章:getElementByTagNames
  • JavaScript DOM学习第三章:内容表格
  • JavaScript DOM学习第二章:编辑文本
  • JavaScript DOM学习第一章:W3C DOM简介
  • javaScript DOM方法与属性摘要

Tags:JavaScript DOM 学习

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接