JavaScript學習14：表單處理

        什麼是表單？

        在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控制元件，它和後臺的資料互動比較重要，我們在做各種管理資訊系統的過程中，肯定要大量的使用它，因此還有很多的東西需要我們去了解和深入學習。