九、表单
1. 验证表单（Validating a Form）
Q：我如何在表单数据提交服务器之前进行验证？
A：要验证表单的输入，可以在表单的onSubmit事件处理器中调用你的验证函数。当用户提交表单时，浏览器首先会调用onSubmit事件处理器。事实上，只有这个处理器返回true时，表单才会被提交。在下面的例子中，onSubmit事件处理器验证了用户email地址。（为了简单期间，如果地址中没有空格、包含@，并且@既不在开始也不在结尾，就认为该地址合法。）注意，处理器本身必须包含一个return语句，为了向浏览器返回ture或者false。
你的Email:
这个例子使用的代码：
<script language="JavaScript">
<!--
function isValid() {
var email=document.form1.t1.value;
if (email.indexOf(' ')==-1
&& 0<email.indexOf('@')
&& email.indexOf('@')+1 < email.length
) return true;
else alert ('Invalid email address!')
return false;
}
//-->
</script>
<form name=form1
method=post
action="javascript:alert('The form is submitted.')"
onSubmit="return isValid()">
Your email:
<input type=text name=t1 size=20 >
<input type=submit value=Submit>
</form>
2. 组合输入域（Combining Input Fields）
Q：我可以只从一个文本域获取一个以上的值从而节省表单的空间吗？
A：可以。例如，你可以显示一个文本输入域和一个选择框。使用这个选择框，用户可以选择要在文本域中输入哪个类型的值。实际上，所有输入值都通过hidden表单元素提交到了服务器。试一下这个例子：
Your name:Your email address:Your country:
这个表单由下面的JavaScript代码创建：
<form name=form1 action="" onSubmit="return validate()">
<input name="name" type=hidden value="">
<input name="email" type=hidden value="">
<input name="country" type=hidden value="">
<select name=s1 onChange="refill()">
<option value="name" selected >Your name:
<option value="email" >Your email address:
<option value="country" >Your country:
</select>
<input name=t1 type=text value="" size=20>
<input name=b1 type=submit value="Enter!">
</form>
<script language="JavaScript">
<!--
isFilled=new Array(0,0,0);
oldActiveField="name"; oldIndex=0;
theActiveField="name"; theIndex=0;
theValue='';
theForm=document.form1;
function refill() {
oldIndex=theIndex;
theIndex=theForm.s1.selectedIndex;
oldActiveField=theActiveField;
theActiveField=theForm.s1.options[theIndex].value;
theValue=theForm.t1.value;
eval('theForm.'+oldActiveField+'.value=theValue');
eval('theForm.t1.value=theForm.'+theActiveField+'.value');
if (theValue!='') isFilled[oldIndex]=1;
if (theValue=='') isFilled[oldIndex]=0;
}
function read() {
oldIndex=theForm.s1.selectedIndex;
oldActiveField=theForm.s1.options[oldIndex].value;
theValue=theForm.t1.value;
eval('theForm.'+oldActiveField+'.value=theValue');
if (theValue!='') isFilled[theIndex]=1;
if (theValue=='') isFilled[theIndex]=0;
}
function validate() {
read();
for (var k=0; k<isFilled.length; k++) {
if (!isFilled[k]) {
theIndex=k;
theForm.s1.selectedIndex=k;
theForm.t1.value='';
theActiveField=theForm.s1.options[k].value;
if (oldIndex==k) alert ('Please fill in your '+theActiveField)
return false;
}
}
alert ('You are submitting the following data:'
+'/nName: '+theForm.name.value
+'/nEmail: '+theForm.email.value
+'/nCountry: '+theForm.country.value
)
return false;
// Instead of returning false in all cases,
// a real-life code here would validate the data
// and return true if the user submitted valid data
}
//-->
</script>
3. 回车键会起作用吗？（Will the Enter key work?）
Q：当用户按下Enter键时，我的表单会被提交吗？
A：在多数浏览其中，如果你的表单只有一个文本输入域，按下Enter键会提交表单。（表单也可能会包含其他输入元素，如复选框、下拉选择框、单选按钮、密码输入域、隐藏域等等。）
4. 使单选按钮不可选（Disabling a Radio Button）
Q：我如何在一个表单中让一个单选按钮不可用（即使其不可选）？
A：要让一个单选按钮不可选，可以在按钮的INPUT标记中使用onClick事件处理器，如下：
<INPUT type="radio" name="myButton" value="theValue"
onClick="this.checked=false;
alert('Sorry, this option is not available!')">
在下面的例子中，“Courier delivery”选项是不可用的。试一下——你会得到警示框：Sorry, this option is not available!
Delivery method (choose one):
download
regular mail
courier delivery