JavaScript初级教程第59%页_根基知识_脚本之家

作者:运维知识    发布时间:2019-12-22 02:24     浏览次数 :

[返回]

123下一页阅读全文

复制代码 代码如下:

function offButton() { var the_box = window.document.form_1.radio_1;

复制代码 代码如下:

if (the_box.checked == true) { window.document.form_1.radio_2.checked = false; document.bgColor='black'; alert("Hey! Turn that back on!"); } }

<form action="something.pl" onsubmit="return checkscript()">

window.document.form_1.radio_2.checked = false;

复制代码 代码如下:

if (the_box.checked == true) { window.document.form_1.radio_1.checked = false; document.bgColor='white'; alert; } }

复制代码 代码如下:

在JavaScript中单选框的用法和复选框相似。不同之处在于HTML中的应用。复选框是一种开关。如果一个复选框被选中,你可以再点击后取消选取. 但如果单选框被选中,则只能通过选取另外一个单选框才能取消对该单选框的选取。例:

...

function onButton() { var the_box = window.document.form_1.radio_2;

Select Boxes
这也很简单:

当第一个单选框被选中时,函数offButton() 被调用。函数如下:

document.forms[0].select.selectedIndex = 2;

在该例中,如果你打算取消对一个单选框的选取,你必须点击另一个单选框。再看下面的程序:

因为每一个表单的检测项都不同,所以我也不能给你一个万能的代码。你需要用我在这一章介绍的这些元素构建自己的检测函数。我在后面一张还有一个例子,你也可以参考。

这个例子很象前面的复选框例子,主要的区别在于该行:

这里还有一篇Jeff Howden的介绍表单的使用错误和解决办法。Forms & JavaScript Living Together in Harmony
局限性
首先,你需要了解当用户提交了表单之后JavaScript的检测代码会做什么:
1、JavaScript检测表单时可能会像下面这样。如果代码发现了一个错误,那么提交就会暂停,然后给用户一个警告让他输入正确的数据。
2、如果没有什么错误或者JavaScript是关闭的那么表单内容就发送到服务器端。
3、如果服务器端的脚本发现了错误,就会返回一些错误信息。在这种情形下,用户需要返回表单然后重新填写数据再次提交。
4、如果没有错误发生,那么服务器端完成必要的工作并显示感谢信息。
就像你所看到的,数据在提交过程中会检测两次:一次是JavaScript一次是服务端。服务端检测总是可行的,而且是可靠的。JavaScript的检测只有在用户开启JavaScript功能的时候才有用,那么既然服务端总是可靠有效,并且与用户使用的浏览器无关,那么为什么还需要JavaScript检测呢?
JavaScript检测是服务器端检测的一个有效补充,因为他能在数据发往服务器端的时候先检测一遍。这样用户就不用使用后退按钮回去修改表单内容,那样会很麻烦,而且在寻找填错的内容也是一件相当麻烦的事情。所以JavaScript检测比服务器端检测对用户的使用体验帮助更大。
所以JavaScript不是一个完全的检测机制,但是作为服务器端的补充和对用户的友好性来讲还是一个不错选择。所以我建议使用这两种检测机制,既满足了用户的使用体验要求又保证了程序的安全性。
onsubmit
当你使用JavaScript来检测表单的时候,第一个事情就是创建onsubmit的事件处理程序。这个程序会在用户提交表单的时候运行。这个程序会检测某些字段是否有值填写,那些复选框是否选择了至少一个,或者其他的你需要检测内容。
代码如下:

该行指令指示JavaScript在该按钮被点击时关闭另外一个按钮。由于另外一个按钮的函数同这个很相似:

单选框
不幸的是,你不能一下子就找到哪个单选框被选中了。只能在遍历之后查找checked属性为true的那一项。

document.forms[0].checkbox.checked = true

复制代码 代码如下:

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';

var selectBox = document.forms[0].select;
user_input = selectBox.options[selectBox.selectedIndex].value

下一篇:没有了