JavaScript學習14：表單處理

標籤：javascript   表單處理   

        什麼是表單？

        在HTML中，表單是由<form>元素來表示的，而在JavaScript中，表單對應的則是HTMLFormElement類型。HTMLFormElement繼承了HTMLElement，因此它擁有HTML元素的預設屬性，並且還專屬自己的屬性和方法。

        

        擷取表單<form>對象的方法有很多種，比如：document.getElementById(“表單標籤ID”)、document.getElementsByTagName(‘標籤名稱’)等等。

        提交表單

        擷取了頁面表單對象，就要考慮如何將表單資料提交給後台了。通常的方式是使用submit事件，他的預設行為就是攜帶資料跳轉到指定的頁面。我們可以通過事件對象，來阻止submit的預設行為。同時也可以使用submit()方法來自訂觸發submit事件，也就是說並不一定要點擊submit按鈕才能進行提交操作。

        提交資料最大的問題就是重複提交表單。因為各種原因，當一條資料提交到伺服器的時候會出現延遲等長時間沒有響應的情況，導致使用者不停的進行提交操作，從而使得重複提交了很多相同的請求，或者造成錯誤，或者這寫入多條相同的資訊，而這都不是我們想看到的。

        解決辦法，簡單來說有兩個：第一就是提交之後，立刻禁用點擊按鈕；第二種就是提交之後，進行判斷，若已提交過，則取消後續的表單提交提交操作。

        瞭解了上面的基礎知識，我們來看兩種常用的表單元素：文字框和選擇框。

        文字框指令碼

        在HTML中，有兩種方式來表現文字框：一種是單行文字框<input type=”text”>，一種是多行文字框<textarea>。雖然<input>在字面上有value值，<textarea>沒有，但是我們都可以通過value擷取他們的值。至於其他的屬性和方法不再贅述，下面看一個比較有意思的東西，過濾輸入。

        為了使文字框輸入指定的字元，我們必須要對輸入的字元進行驗證。有一種做法是判斷字元是否合法，這是提交後操作的。那麼我們也可以在提交前限制某些字元，這就是過濾輸入。看下代的簡單實現：     

<span style="font-size:18px;">//屏蔽非數字鍵的輸入addEvent(textField,'keypress',function(evt){var e=evt||window.event;var charCode=getCharCode(evt);if(!/\d/.test(String.fromCharCode(charCode))&&charCode>8){preDet(evt);}});</span>

        選擇框指令碼

        選擇框是通過<select>和<option>元素建立的，除了通用的一些屬性和方法外，HTMLSelectElement類型還提供了如下的屬性和方法：

       

        在DOM中，每個<option>元素都有一個HTMLOptionElement對象，以便訪問資料，這個對象有如下一些屬性：

        

        選擇框有單選和多選之分，對於單選來說，使用selectedIndex屬性最為簡單。而對於多選的需求，則使用selected屬性更為簡單一些。這是判斷是否選中，對於選中的按鈕如何擷取它的值，就要使用checked屬性了。

        程式碼範例就不再寫了，因為比較簡單，都是基礎性的，大家有興趣實踐的可以寫寫代碼實現一下單選和多選的功能。

        小結一下：

        JS的表單處理遠遠不止這些，比如表單裡面的表格、頁面的label等等，都是表單的元素，尤其是datagrid控制項，它和背景資料互動比較重要，我們在做各種管理資訊系統的過程中，肯定要大量的使用它，因此還有很多的東西需要我們去瞭解和深入學習。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

JavaScript學習14：表單處理