JavaScript FAQ（十一）——表单（Form）

 九、表单

1. 验证表单（Validating a Form）

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

这个例子使用的代码：

<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表单元素提交到了服务器。试一下这个例子：

这个表单由下面的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!