【翻譯作品】JavaScript DOM學習第五章：表單簡介

文章目錄

• Texts，textarea和隱藏的欄位
• Select Boxes
• checkboxes
•  
• 單選框

在這一章我主要介紹一些用來檢測使用者輸入的代碼，利用這些代碼，你也可以寫一些自己的檢測函數。

因為每一個表單的檢測項都不同，所以我也不能給你一個萬能的代碼。你需要用我在這一章介紹的這些元素構建自己的檢測函數。我在後面一張還有一個例子，你也可以參考。

在這一章我會首先討論一下用JavaScript來檢測表單的局限性，然後會解釋一下提交時間處理常式，然後是表單本身的一些方法和屬性。最後就是如何訪問表單元素。

這裡還有一篇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的事件處理常式。這個程式會在使用者提交表單的時候運行。這個程式會檢測某些欄位是否有值填寫，那些複選框是否選擇了至少一個，或者其他的你需要檢測內容。

代碼如下：

<form action="something.pl" onsubmit="return checkscript()">
checkscript()就是這個程式的名字。這段代碼需要返回true或者false。如果返回的是false，那麼表單就不會被提交，不論返回true還是false代碼都會停止運行。
所以產生的程式碼如下：
function checkscript() {if (some value is/is not something) {// something is wrongalert('alert user of problem');return false;}else if (another value is/is not something) {// something else is wrongalert('alert user of problem');return false;}// If the script makes it to here, everything is OK,// so you can submit the formreturn true;}
當然這段代碼可以寫的很複雜，如果你需要檢測很多表單項目或者一大堆的單選框。基本思想就是這樣了：你遍曆表單裡的每一個需要檢查的元素，如果發現了錯誤就返回false，然後代碼停止運行，表單也不會被提交。
當你發現了錯誤的時候，你應該提醒使用者。可以用一個警告框，不過今天大多數的辦法是產生一條錯誤資訊然後添加在錯誤條目的後面。
只有在最後地方，你檢查過了所有的元素並且沒有發現錯誤，那麼你就返回true，表單就會被提交。
 
表單的方法和屬性
JavaScript對於處理表單還有一些內建的方法和屬性。其中三個比較重要：
你可以用submit()方法來提交表單。提交頁面的第一個表單你可以寫：
document.forms[0].submit()
注意當使用者使用JavaScript提交表單的時候，表單的事件處理常式就不起作用了。
重設表單，你可以：
document.forms[0].reset()
我假設，沒有做測試，你如果使用這個方法，那麼重設表單的事件處理常式也就不會執行。
最後你可以修改表單的ACTION項：
document.forms[0].action = 'the_other_script.pl';
如果表單在某些情況需要提交給其他頁面的時候這個方法就相當方便。
 
訪問表單元素
表單的有效性檢測需要訪問到表單的元素才能知道使用者填了什麼內容進去。所以首先我們需要根據Level 0 DOM來訪問表單。一般這樣寫：
document.forms[number].elements[number]
當頁面載入之後，JavaScript就會產生一個forms數組用來儲存頁面上所有的表單。所以第一個表單就是forms[0]，第二個就是forms[1]等等。
JavaScript把表單裡面的每個元素也儲存進了一個數組。第一個元素就是elements[0]，第二個就是elements[1]。所有的input，select，textarea都是一個元素。
有些時候，最好還是使用表單和元素的name比較好。在HTML中，你需要給每個元素命名，比如：
<form name="personal" action="something.pl" onsubmit="return checkscript()"><input type=text size=20 name=name><input type=text size=20 name=address><input type=text size=20 name=city></form>
現在你就可以通過下面的方法來訪問元素：
document.personal.namedocument.personal.addressdocument.personal.city
使用name的好處就在於你能把頁面的所有元素順序打亂的時候代碼依然能夠運行，如果用數組就不行。比如上面例子中的city的輸入框是document.forms[0].elements[2]，但是當你把他放在第一個的時候就變成了document.forms[0].element[0]，這時候你就得改代碼了。
 
值的檢測
當然，最重要的事情還是找出使用者填進去的值或者選擇了的複選框。有些時候你還想填一些其他資訊在表單裡。
下面的這些小段的代碼能夠協助你訪問到表單裡的元素。所有的都是把使用者輸入儲存在user_input變數中。之後，你就可以檢測有效性了。
Texts，textarea和隱藏的欄位
非常簡單：
user_input = document.forms[0].text.value
其中text就是文字框或者textarea或者隱藏欄位的name。value屬性就會給出這些元素的文本，然後儲存在user_input裡。
直接寫也可以：
document.forms[0].text.value = 'The new value';
Select Boxes
這也很簡單：
user_input = document.forms[0].select.value;
要更改他的選擇項目，就必須修改selectedIndex，比如：
document.forms[0].select.selectedIndex = 2;
現在第三個選項就被選擇了。
舊的瀏覽器
在舊的瀏覽器裡面select boxes沒有value屬性，那麼：
var selectBox = document.forms[0].select;user_input = selectBox.options[selectBox.selectedIndex].value
首先找出使用者選擇了的項目。document.forms[0].select.selectedIndex給出了選擇項目的編號。JavaScript已經建立了一個包含所有select boxes選項的options數組。所以通過這個數組就能知道使用者選擇了什麼，然後儲存在user_input裡面。
checkboxes
checkboxes有一些小小的不同。我們已經知道了他的值，但是需要知道使用者是否選擇了他。checked屬性可以告訴我們。他有true和false兩個值。
那麼：
if (document.forms[0].checkbox.checked) {user_input = document.forms[0].checkbox.name}
checkbox是複選框的名字。如果複選框被選擇了，我們就得到名字（你也可以選擇得到值）然後傳遞給user_input。
選擇一個複選框可以：
document.forms[0].checkbox.checked = true
 單選框
不幸的是，你不能一下子就找到哪個單選框被選中了。只能在遍曆之後尋找checked屬性為true的那一項。
for (i=0;i<document.forms[0].radios.length;i++) {if (document.forms[0].radios[i].checked) {user_input = document.forms[0].radios[i].value;}}
radios就是這一組單選框的名字。
注意document.forms[0].radios是包含所有單選框的數組，迴圈檢測是否checked的屬性為true。如果是則傳遞個user_input。
document.forms[0].radios.length返回所有單選框的數目。
如果選擇一個單選框，我們可以設定它的checked的值為true：
document.forms[0].radios[i].checked = true;
 
翻譯地址：http://www.quirksmode.org/js/forms.html