JavaScript FAQ（十一）

九、表单

1. 验证表单（Validating a Form）

Q：我如何在表单数据提交服务器之前进行验证？
A：要验证表单的输入，可以在表单的onSubmit事件处理器中调用你的验证函数。当用户提交表单时，浏览器首先会调用onSubmit事件处理器。事实上，只有这个处理器返回true时，表单才会被提交。在下面的例子中，onSubmit事件处理器验证了用户email地址。（为了简单期间，如果地址中没有空格、包含@，并且@既不在开始也不在结尾，就认为该地址合法。）注意，处理器本身必须包含一个return语句，为了向浏览器返回ture或者false。

你的Email:

这个例子使用的代码：

1. <scriptlanguage="JavaScript">
2. <!--
3. functionisValid(){
4. varemail=document.form1.t1.value;
5. if(email.indexOf('')==-1
6. &&0<email.indexOf('@')
7. &&email.indexOf('@')+1<email.length
8. )returntrue;
9. elsealert('Invalidemailaddress!')
10. returnfalse;
11. }
12. //-->
13. </script>
15. <formname=form1
16. method=post
17. action="javascript:alert('Theformissubmitted.')"
18. onSubmit="returnisValid()">
19. Youremail:
20. <inputtype=textname=t1size=20>
21. <inputtype=submitvalue=Submit>
22. </form>

2. 组合输入域（Combining Input Fields）

Q：我可以只从一个文本域获取一个以上的值从而节省表单的空间吗？

A：可以。例如，你可以显示一个文本输入域和一个选择框。使用这个选择框，用户可以选择要在文本域中输入哪个类型的值。实际上，所有输入值都通过hidden表单元素提交到了服务器。试一下这个例子：

Your name: Your email address: Your country:

这个表单由下面的JavaScript代码创建：

1. <formname=form1action=""onSubmit="returnvalidate()">
2. <inputname="name"type=hiddenvalue="">
3. <inputname="email"type=hiddenvalue="">
4. <inputname="country"type=hiddenvalue="">
5. <selectname=s1onChange="refill()">
6. <optionvalue="name"selected>Yourname:
7. <optionvalue="email">Youremailaddress:
8. <optionvalue="country">Yourcountry:
9. </select>
10. <inputname=t1type=textvalue=""size=20>
11. <inputname=b1type=submitvalue="Enter!">
12. </form>
14. <scriptlanguage="JavaScript">
15. <!--
16. isFilled=newArray(0,0,0);
17. oldActiveField="name";oldIndex=0;
18. theActiveField="name";theIndex=0;
19. theValue='';
20. theForm=document.form1;
22. functionrefill(){
23. oldIndex=theIndex;
24. theIndex=theForm.s1.selectedIndex;
25. oldActiveField=theActiveField;
26. theActiveField=theForm.s1.options[theIndex].value;
27. theValue=theForm.t1.value;
28. eval('theForm.'+oldActiveField+'.value=theValue');
29. eval('theForm.t1.value=theForm.'+theActiveField+'.value');
30. if(theValue!='')isFilled[oldIndex]=1;
31. if(theValue=='')isFilled[oldIndex]=0;
32. }
34. functionread(){
35. oldIndex=theForm.s1.selectedIndex;
36. oldActiveField=theForm.s1.options[oldIndex].value;
37. theValue=theForm.t1.value;
38. eval('theForm.'+oldActiveField+'.value=theValue');
39. if(theValue!='')isFilled[theIndex]=1;
40. if(theValue=='')isFilled[theIndex]=0;
41. }
43. functionvalidate(){
44. read();
45. for(vark=0;k<isFilled.length;k++){
46. if(!isFilled[k]){
47. theIndex=k;
48. theForm.s1.selectedIndex=k;
49. theForm.t1.value='';
50. theActiveField=theForm.s1.options[k].value;
51. if(oldIndex==k)alert('Pleasefillinyour'+theActiveField)
52. returnfalse;
53. }
54. }
55. alert('Youaresubmittingthefollowingdata:'
56. +'\nName:'+theForm.name.value
57. +'\nEmail:'+theForm.email.value
58. +'\nCountry:'+theForm.country.value
59. )
61. returnfalse;
62. //Insteadofreturningfalseinallcases,
63. //areal-lifecodeherewouldvalidatethedata
64. //andreturntrueiftheusersubmittedvaliddata
65. }
67. //-->
68. </script>

3. 回车键会起作用吗？（Will the Enter key work?）

Q：当用户按下Enter键时，我的表单会被提交吗？

A：在多数浏览其中，如果你的表单只有一个文本输入域，按下Enter键会提交表单。（表单也可能会包含其他输入元素，如复选框、下拉选择框、单选按钮、密码输入域、隐藏域等等。）

4. 使单选按钮不可选（Disabling a Radio Button）

Q：我如何在一个表单中让一个单选按钮不可用（即使其不可选）？

A：要让一个单选按钮不可选，可以在按钮的INPUT标记中使用onClick事件处理器，如下：

1. <INPUTtype="radio"name="myButton"value="theValue"
2. onClick="this.checked=false;
3. alert('Sorry,thisoptionisnotavailable!')">

在下面的例子中，“Courier delivery”选项是不可用的。试一下——你会得到警示框：Sorry, this option is not available!

Delivery method (choose one):
download
regular mail
courier delivery