JavaScript FAQ（十一）——表單（Form）__Java

 九、表單

 

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=postaction="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