表單和資料完整性

建立表單元素是為了滿足使用者向伺服器傳送資料的需求。

表單基礎

HTML表單透過

元素來定義

特性：
method 屬性設定或獲取如何將表單資料傳送到伺服器
action 屬性設定或獲取表單內容要傳送處理的 URL
enctype 屬性設定或獲取表單傳送的編碼方式。預設是application/x-www-form-urlencoded，如果要上傳檔案要設成multipart/form-data。
accept 屬性上傳檔案時，列出伺服器能正確處理的mime型別
acceptCharset 屬性設定或獲取處理表單的伺服器必須接受的字元編碼

輸入元素：
元素主要的HTML輸入元素
透過type屬性確定控制元件：
text radio checkbox file password button submit reset hidden image
元素組合框或下拉框，值由元素定義
元素多行文字，尺寸由rows和cols特性確定

元素將標籤繫結到特定的表單欄位
for 屬性指定繫結的表單id
當滑鼠點選label容器，焦點將移到指定表單上
例如：
已繫結

無繫結

建議在每個表單欄位都設定id和name屬性，且值相等。（name用於資料提交，id使用者客戶端確定元素）

對

元素進行指令碼編寫

獲取表單引用
1 用getElementById()
例如：var oForm = document.getElementById("form1");

2 用document的form集合，並透過位置或name屬性引用
例如：var oForm = document.forms[0];
或者：var oForm = document.forms["form1"];

訪問表單欄位
1 透過表單的elements集合，並透過位置或name屬性引用
例如：var oElm = oForm.elements[0];
或者：var oElm = oForm.elements["elm"];

2 直接透過name屬性訪問
例如：var oElm = oForm.elm;
如果名字中有空格可以用方括號：
var oElm = oForm["elm 1"];

3 用getElementById()
例如：var oElm = document.getElementById("elm1");

表單欄位共性
所有表單欄位（除隱藏欄位）：
disabled 屬性設定或獲取控制元件是否被禁用
form 屬性獲取物件所在表單的引用
blur() 方法使元素失去焦點並觸發onblur事件
focus() 方法使元素得到焦點並觸發onfocus事件
onblur 事件元素失去焦點時觸發
onfocus 事件元素得到焦點時觸發

注意：隱藏欄位（hidden）只有form屬性

提交表單
1 使用提交按鈕或提交圖象提交表單
例如：

當客戶點選以上按鈕將提交表單，如果按回車，並存在這些按鈕，瀏覽器會認為點選了按鈕

2 獲取表單引用，再使用submit()方法
例如：
document.getElementById("form1").submit();
用button模擬submit：

onsubmit 事件表單提交時觸發
例如；

不同於submit()方法，使用reset()方法也會觸發reset事件

注意：對於表單的預設資訊，重置後還是會保留的，對於沒有預設資訊的表單應儘量避免使用

文字框

有兩種文字框：
單行文字框
size 屬性文字框寬度
value 屬性文字框初始內容
maxlength 屬性文字框允許最大字元數
例如：

多行文字框
rows 屬性以字元為單位文字框的高度
cols 屬性以字元為單位文字框的寬度
的初始值包含在標籤之間
例如：
請輸入內容
而且不能指定允許最大字元數

獲取/更改文字框的值
value 屬性獲取或設定文字框文字
value.length 屬性獲取文字框中文字長度

選擇文字
select() 方法選中文字框中所有文字（必須已經獲得焦點）
為確保文字框獲得焦點，最好在呼叫select()前呼叫focus()
例如：

文字框事件
除了blur和focus事件，還支援change和select事件
change 事件使用者更改內容並失去焦點時觸發
注意：透過value屬性更改內容將不會觸發，而且觸發時先觸發change事件，再觸發blur事件
select 事件當一個或多個字元被選中時觸發
無論手工還是select()方法，與焦點無關

自動選擇文字
例如：

自動切換到下一個
透過表單的elements集合，獲取下一個表單元素

限制textarea的字元數
例如：

允許/阻止文字框中的字元
用於驗證使用者資料，或阻止無效資料輸入

阻止無效字元
設定要阻止的字元，再檢測輸入字元的charCode是否要阻止的字元

允許有效字元
設定允許的字元，再檢測輸入字元的charCode是否允許的字元

對於貼上內容
1 禁止貼上
ie中，用onpaste事件阻止貼上行為，其他還需要用oncontextmenu事件
例如：
對於用Ctrl+V進行的貼上，可根據charCode和ctrlKey判斷按鍵是否Ctrl+V

2 失去焦點驗證
在onblur事件中檢測
注意：不能在onchange事件中檢測，當第一次檢測時能正常發現不正確內容，這時焦點回到原來文字框，但如果第二次並沒有修改不正確的內容，所以沒有觸發onchange事件，即沒有觸發檢測事件直接跳過了。

使用上下鍵運算元字文字
在onkeydowm事件中操作

列表框和組合框

列表框和組合框透過HTML的元素來建立。
size 屬性同時可見的條目個數

訪問選項
HTML DOM為每個元素定義了 options 集合
獲取顯示文字和值：
一般DOM方法：
oListbox.option[1].firstchild.nodevalue;
oListbox.option[1].getAttribute("value");
HTML DOM方法：
oListbox.option[1].text;
oListbox.option[1].value;

index 屬性表示在options集合中的位置
例如：oListbox.option[1].index; //1

length 屬性表示選項數目
例如：oListbox.options.length;

獲取/更改選中項
select：
selectedIndex 屬性選中的選項的索引（沒有選中時為-1）
multiple 屬性設為"multiple"時可以在列表框中選擇多個選項
如果選中多個選項，selectedIndex將包含第一個選項的索引

option：
selected 屬性表示選項是否被選中
透過對選項迴圈判斷selected屬性，獲取所有選中選項的索引

新增選項
用javascript新增選項：
1 使用DOM方法建立元素
var oOption = document.createElement("option");
2 建立文字節點，並分配名稱
oOption.appendChild(document.createTextNode(sName));
3 設定選項的值
oOption.setAttribute("value", sValue);
4 將選項新增到列表框中
oListbox.appendChild(oOption);

刪除選項
用javascript刪除選項：
1 將要刪除的選項設定為null
oListbox.options[1] = null;
2 使用remove()方法，引數為要刪除的選項的索引
oListbox.remove(0);
注意：如果用迴圈來刪除多個選項，最好從最大的索引開始操作，因為刪除後index索引會重置

移動選項
把選項從一個列表框移動到另一個列表框：
1 獲取要移動的選項的引用
var oOption = oListboxFrom(iIndex);
2 在另一個列表框中使用appendChild()方法新增該選項，同時該選項會從當前列表框中刪除
oListboxTo.appendChild(oOption);
注意：跟刪除選項一樣，如果要移動多個選項，最好從最大的索引開始操作

重新排序選項
將選項進行重新排序，包括向上和向下移動：
1 獲取要移動的選項的引用
var oOption = oListbox(iIndex);
2 獲取要移動的位置的選項
向上移動：var oPrevOption = oListbox.options[iIndex-1];
向下移動：var oNextOption = oListbox.options[iIndex+1];
3 使用insertBefore()方法重新設定位置
向上移動：oListbox.insertBefore(oOption, oPrevOption);
向下移動：oListbox.insertBefore(oNextOption, oOption);

建立自動提示的文字框

這種文字框會檢查使用者輸入的頭幾個字元，然後給出幫助使用者輸入的列表

匹配
搜尋字串陣列並返回以特定字元開頭的所有值：
1 建立用於儲存所有匹配的值的陣列
var arrResule = new Array;
2 確保進行匹配的字串非空，再迴圈找出匹配的每個值，並新增到陣列中
if(arrValues[i].indexof(sText)==0) arrResult.push(arrResule[i]);
建議：在得到匹配陣列後最好用sort方法排序，對於字串可結合localeCompare方法

內部機制
使用keyup事件呼叫提示程式
1 清空列表框（參考刪除選項）
2 把匹配陣列的值插入到列表框（參考新增選項）
3 給列表框的選項新增onclick事件，將文字框內容設定為當前選中的選項
注意：由於匹配過程是區分大小寫的，建議先將字串轉為小寫或大寫

[@more@]

《JavaScript高階程式設計》學習筆記（表單和資料完整性）

相關文章