JavaScript DOM 学习第五章 表单简介 |
|
因为每一个表单的检测项都不同，所以我也不能给你一个万能的代码 。你需要用我在这一章介绍的这些元素构建自己的检测函数 。我在后面一张还有一个例子，你也可以参考 。 在这一章我会首先讨论一下用JavaScript来检测表单的局限性，然后会解释一下提交时间处理程序，然后是表单本身的一些方法和属性 。最后就是如何访问表单元素 。 这里还有一篇Jeff Howden的介绍表单的使用错误和解决办法 。Forms & JavaScript Living Together in Harmony 复制代码 代码如下: <form action="something.pl" onsubmit="return checkscript()"> checkscript()就是这个程序的名字 。这段代码需要返回true或者false 。如果返回的是false，那么表单就不会被提交，不论返回true还是false代码都会停止运行 。 所以生成的代码如下： 复制代码 代码如下: function checkscript() { if (some value is/is not something) { // something is wrong alert(alert user of problem); return false; } else if (another value is/is not something) { // something else is wrong alert(alert user of problem); return false; } // If the script makes it to here, everything is OK, // so you can submit the form return true; } 当然这段代码可以写的很复杂，如果你需要检测很多表单项目或者一大堆的单选框 。基本思想就是这样了：你遍历表单里的每一个需要检查的元素，如果发现了错误就返回false，然后代码停止运行，表单也不会被提交 。 当你发现了错误的时候，你应该提醒用户 。可以用一个警告框，不过今天大多数的办法是生成一条错误信息然后添加在错误条目的后面 。 只有在最后地方，你检查过了所有的元素并且没有发现错误，那么你就返回true，表单就会被提交 。 表单的方法和属性 JavaScript对于处理表单还有一些内建的方法和属性 。其中三个比较重要： 你可以用submit()方法来提交表单 。提交页面的第一个表单你可以写： 复制代码 代码如下: document.forms[0].submit() 注意当用户使用JavaScript提交表单的时候，表单的事件处理程序就不起作用了 。 重置表单，你可以： [code] document.forms[0].reset() 我假设，没有做测试，你如果使用这个方法，那么重置表单的事件处理程序也就不会执行 。 最后你可以修改表单的ACTION项： [code] document.forms[0].action = the_other_script.pl; 如果表单在某些情况需要提交给其他页面的时候这个方法就相当方便 。 访问表单元素 表单的有效性检测需要访问到表单的元素才能知道用户填了什么内容进去 。所以首先我们需要根据Level 0 DOM来访问表单 。一般这样写： [code] document.forms[number].elements[number] 当页面加载之后，JavaScript就会生成一个forms数组用来存储页面上所有的表单 。所以第一个表单就是forms[0]，第二个就是forms[1]等等 。 JavaScript把表单里面的每个元素也存储进了一个数组 。第一个元素就是elements[0]，第二个就是elements[1] 。所有的input，select，textarea都是一个元素 。 有些时候，最好还是使用表单和元素的name比较好 。在HTML中，你需要给每个元素命名，比如： [code] <form name="personal" action="something.pl" onsubmit="return checkscript()"> 2 <input type=text size=20 name=name> 3 <input type=text size=20 name=address> 4 <input type=text size=20 name=city> 5 </form> 现在你就可以通过下面的方法来访问元素： [code] document.personal.name 2 document.personal.address 3 document.personal.city 使用name的好处就在于你能把页面的所有元素顺序打乱的时候代码依然能够运行，如果用数组就不行 。比如上面例子中的city的输入框是document.forms[0].elements[2]，但是当你把他放在第一个的时候就变成了document.forms[0].element[0]，这时候你就得改代码了 。 值的检测 当然，最重要的事情还是找出用户填进去的值或者选择了的复选框 。有些时候你还想填一些其他信息在表单里 。 下面的这些小段的代码能够帮助你访问到表单里的元素 。所有的都是把用户输入保存在user_input变量中 。之后，你就可以检测有效性了 。 Texts，textarea和隐藏的字段 非常简单： [code] user_input = document.forms[0].text.value 其中text就是文本框或者textarea或者隐藏字段的name 。value属性就会给出这些元素的文本，然后存储在user_input里 。 直接写也可以： 复制代码 代码如下: document.forms[0].text.value = The new value; Select Boxes 这也很简单： 复制代码 代码如下: user_input = document.forms[0].select.value; 要更改他的选择项目，就必须修改selectedIndex，比如： 复制代码 代码如下: document.forms[0].select.selectedIndex = 2; 现在第三个选项就被选择了 。 旧的浏览器 在旧的浏览器里面select boxes没有value属性，那么： 复制代码 代码如下: var selectBox = document.forms[0].select; user_input = selectBox.options[selectBox.selectedIndex].value 首先找出用户选择了的项目 。document.forms[0].select.selectedIndex给出了选择项目的编号 。JavaScript已经创建了一个包含所有select boxes选项的options数组 。所以通过这个数组就能知道用户选择了什么，然后存储在user_input里面 。 checkboxes checkboxes有一些小小的不同 。我们已经知道了他的值，但是需要知道用户是否选择了他 。checked属性可以告诉我们 。他有true和false两个值 。 那么： 复制代码 代码如下: if (document.forms[0].checkbox.checked) { user_input = document.forms[0].checkbox.name } checkbox是复选框的名字 。如果复选框被选择了，我们就得到名字（你也可以选择得到值）然后传递给user_input 。 选择一个复选框可以： 复制代码 代码如下: document.forms[0].checkbox.checked = true 单选框 不幸的是，你不能一下子就找到哪个单选框被选中了 。只能在遍历之后查找checked属性为true的那一项 。 复制代码 代码如下: for (i=0;i<document.forms[0].radios.length;i++) { if (document.forms[0].radios[i].checked) { user_input = document.forms[0].radios[i].value; } } radios就是这一组单选框的名字 。 注意document.forms[0].radios是包含所有单选框的数组，循环检测是否checked的属性为true 。如果是则传递个user_input 。 document.forms[0].radios.length返回所有单选框的数目 。 如果选择一个单选框，我们可以设置它的checked的值为true： 复制代码 代码如下: document.forms[0].radios[i].checked = true; 翻译地址：http://www.quirksmode.org/js/forms.html 转载请保留以下信息 作者：北玉(tw:@rehawk) |
