什么是表單？

一個(gè)表單有三個(gè)基本組成部分： 表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。 表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來(lái)控制其他定義了處理腳本的處理工作。

JavaScript與表單間的關(guān)系：JS最初的應(yīng)用就是用于分擔(dān)服務(wù)器處理表單的責(zé)任，打破依賴服務(wù)器的局面，盡管目前web和javascript都有了長(zhǎng)足的發(fā)展，web表單依然沒有為許多常見的任務(wù)提供現(xiàn)成的解決方案，很多開發(fā)人員不僅會(huì)在驗(yàn)證表單的時(shí)候使用javascript，而且還會(huì)用來(lái)增強(qiáng)一些標(biāo)準(zhǔn)表單控件的默認(rèn)行為。

一 ,表單的基礎(chǔ)知識(shí)

在HTML中，表單由form標(biāo)簽，在javascript中，表單對(duì)應(yīng)HTMLFormElement類型，HTMLFormElement類型繼承HTMLElement類型，所有它和其他的Element元素有相同的默認(rèn)屬性，同時(shí)它也有自己的屬性和方法：

acceptCharset：服務(wù)器能夠處理的字符集；等價(jià)于 HTML 中的 accept-charset 特性。

action：接受請(qǐng)求的 URL；等價(jià)于 HTML 中的 action 特性 。

elements：表單中所有控件的集合（HTMLCollection）。

enctype：請(qǐng)求的編碼類型；等價(jià)于 HTML 中的 enctype 特性。

length：表單中控件的數(shù)量。

method：要發(fā)送的 HTTP 請(qǐng)求類型，通常是"get"或"post"；等價(jià)于 HTML 的 method 特性。

name：表單的名稱；等價(jià)于 HTML 的 name 特性。

reset()：將所有表單域重置為默認(rèn)值。

submit()：提交表單。

target：用于發(fā)送請(qǐng)求和接收響應(yīng)的窗口名稱；等價(jià)于 HTML 的 target 特性。

要取得form表單元素的方法有： var form=document.getElementById('form1'); //通過id來(lái)取得表單元素

var firstForm=document.forms[0]; //通過document.forms來(lái)取得頁(yè)面中的所有表單元素，通過索引值'0‘，取得第一個(gè)表單元素

var form2=document.forms['form2']; //通過document.forms來(lái)取得頁(yè)面中的所有表單元素，通過name值取得特定的表單元素

提交表單：

　<!-- 通用提交按鈕 -->
　<input type="submit" value="Submit Form">
　<!-- 自定義提交按鈕 -->
　<button type="submit">Submit Form</button>
　<!-- 圖像按鈕 -->
　<input type="image" src="graphic.gif">

以這種方式提交表單時(shí)，瀏覽器會(huì)在將請(qǐng)求發(fā)送給服務(wù)器之前觸發(fā) submit 事件。這樣，我們就有機(jī)會(huì)驗(yàn)證表單數(shù)據(jù)，并據(jù)以決定是否允許表單提交。阻止這個(gè)事件的默認(rèn)行為就可以取消表單提交

在JS中我們同樣可以以編程的方式調(diào)用submit（）方法來(lái)提交表單：

var form = document.getElementById("myForm");
//提交表單
　form.submit();

阻止表單提交（阻止默認(rèn)事件）：

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件對(duì)象
event = EventUtil.getEvent(event);
//阻止默認(rèn)事件
EventUtil.preventDefault(event);
});

在表單數(shù)據(jù)無(wú)效而不能發(fā)送給服務(wù)器時(shí)，可以使用這一技術(shù)

重置表單：

<!-- 通用重置按鈕 -->
<input type="reset" value="Reset Form">
<!-- 自定義重置按鈕 -->
<button type="reset">Reset Form</button>

在重置表單時(shí)，所有表單字段都會(huì)恢復(fù)到頁(yè)面剛加載完畢時(shí)的初始值

用JS方法來(lái)重置表單：

var form = document.getElementById("myForm");
//重置表單
form.reset();

阻止重置表單的默認(rèn)操作：

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件對(duì)象
event = EventUtil.getEvent(event);
//阻止表單重置
EventUtil.preventDefault(event);
});

表單字段：

每個(gè)表單都有Element屬性，該屬性是表單中所有表單元素（字段）的集合。這個(gè)集合是一個(gè)有序列表，每個(gè)表單字段在element集合中出現(xiàn)的順序，與在標(biāo)記中出現(xiàn)的先后順序相同，可以按位置和name值來(lái)訪問他們。常見的表單字段有input，select，fieldset，要取得表單中的表單字段：

var form = document.getElementById("form1");
//取得表單中的第一個(gè)字段
var field1 = form.elements[0];
//取得名為"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表單中包含的字段的數(shù)量
var fieldCount = form.elements.length;

共有的表單字段屬性：

disabled：布爾值，表示當(dāng)前字段是否被禁用。

form：指向當(dāng)前字段所屬表單的指針；只讀。

name：當(dāng)前字段的名稱。

readOnly：布爾值，表示當(dāng)前字段是否只讀。

tabIndex：表示當(dāng)前字段的切換（tab）序號(hào)。

type：當(dāng)前字段的類型，如"checkbox"、 "radio"，等等。

value：當(dāng)前字段將被提交給服務(wù)器的值。對(duì)文件字段來(lái)說，這個(gè)屬性是只讀的，包含著文件在計(jì)算機(jī)中的路徑

除了 form 屬性之外，可以通過 JavaScript 動(dòng)態(tài)修改其他任何屬性。

能夠動(dòng)態(tài)修改表單字段屬性，意味著我們可以在任何時(shí)候，以任何方式來(lái)動(dòng)態(tài)操作表單。

用戶可能會(huì)重復(fù)單擊表單的提交按鈕。在涉及信用卡消費(fèi)時(shí)，這就是個(gè)問題：因?yàn)闀?huì)導(dǎo)致費(fèi)用翻番。

為此，最常見的解決方案，就是在第一次單擊后就禁用提交按鈕。只要偵聽 submit 事件，并在該事件發(fā)生時(shí)禁用提交按鈕即可 ：

//避免多次提交表單
　EventUtil.addHandler(form, "submit", function(event){
　event = EventUtil.getEvent(event);
　var target = EventUtil.getTarget(event);
//取得提交按鈕
　var btn = target.elements["submit-btn"];
//禁用它
　btn.disabled = true;
　});

除了<fieldset>之外，所有表單字段都有 type 屬性。對(duì)于<input>元素，這個(gè)值等于 HTML 特性 type 的值。對(duì)于其他元素，這個(gè) type 屬性的值如下表所列。

共有的表單字段方法 ：

每個(gè)表單字段都有兩個(gè)方法： focus()和 blur()。使用 focus()方法，可以將用戶的注意力吸引到頁(yè)面中的某個(gè)部位。例如，在頁(yè)面加載完畢后，將焦點(diǎn)轉(zhuǎn)移到表單中的第一個(gè)字段。

EventUtil.addHandler(window, "load", function(event){ /*給window綁定一個(gè)監(jiān)聽事件，放頁(yè)面加載完成，光標(biāo)自動(dòng)對(duì)準(zhǔn)在指定的表單字段*/
document.forms[0].elements[0].focus();
});

HTML5 為表單字段新增了一個(gè) autofocus 屬性。在支持這個(gè)屬性的瀏覽器中，只要設(shè)置這個(gè)屬性，不用 JavaScript 就能自動(dòng)把焦點(diǎn)移動(dòng)到相應(yīng)字段。

例如：

<input type="text" autofocus>

與 focus()方法相對(duì)的是 blur()方法，它的作用是從元素中移走焦點(diǎn):

document.forms[0].elements[0].blur();

change事件：對(duì)于<input>和<textarea>元素，在它們失去焦點(diǎn)且 value 值改變時(shí)觸發(fā)；對(duì)于

<select>元素，在其選項(xiàng)改變時(shí)觸發(fā)。

二，文本框腳本

在 HTML 中，有兩種方式來(lái)表現(xiàn)文本框：一種是使用<input>元素的單行文本框，另一種是使用<textarea>的多行文本框。

選擇文本：

在文本框獲得焦點(diǎn)時(shí)選擇其所有文本，這是一種非常常見的做法 ，實(shí)現(xiàn)代碼如下：

EventUtil.addHandler(textbox, "focus", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
});

取得選擇的文本 ：

雖然通過 select 事件我們可以知道用戶什么時(shí)候選擇了文本，但仍然不知道用戶選擇了什么文本。HTML5 通過一些擴(kuò)展方案解決了這個(gè)問題，以便更順利地取得選擇的文本。該規(guī)范采取的辦法是添加兩個(gè)屬性： selectionStart 和 selectionEnd。

function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

IE9+、 Firefox、 Safari、 Chrome 和 Opera 都支持這兩個(gè)屬性。 IE8 及之前版本不支持這兩個(gè)屬性，而是提供了另一種方案。 IE8 及更早的版本中有一個(gè) document.selection 對(duì)象，其中保存著用戶在整個(gè)文檔范圍內(nèi)選擇的文本信息

function getSelectedText(textbox){
if (typeof textbox.selectionStart == "number"){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
} else if (document.selection){
return document.selection.createRange().text;
}
}

過濾輸入：

我們經(jīng)常會(huì)要求用戶在文本框中輸入特定的數(shù)據(jù)，或者輸入特定格式的數(shù)據(jù)。

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);//取得輸入鍵的字符編碼
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode))){ //將字符編碼轉(zhuǎn)換到字符，并用正則表達(dá)式檢測(cè)是否符合匹配

EventUtil.preventDefault(event);

}
});

以上代碼實(shí)現(xiàn)對(duì)表單字段中輸入的數(shù)據(jù)的控制，只允許輸入數(shù)字

有時(shí)我們想要屏蔽哪些非數(shù)字的鍵，而不像屏蔽哪些基本鍵和按下ctrl鍵的操作。

自動(dòng)切換焦點(diǎn)：

使用 JavaScript 可以從多個(gè)方面增強(qiáng)表單字段的易用性。其中，最常見的一種方式就是在用戶填寫完當(dāng)前字段時(shí)，自動(dòng)將焦點(diǎn)切換到下一個(gè)字段。為增強(qiáng)易用性，同時(shí)加快數(shù)據(jù)輸入，可以在前一個(gè)文本框中的字符達(dá)到最大數(shù)量后，自動(dòng)將焦點(diǎn)切換到下一個(gè)文本框。

比如對(duì)于下面的表單字段而言：

<input type="text" name="tel1" id="txtTel1" maxlength="3">

<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">

想要達(dá)到自動(dòng)切換焦點(diǎn)的效果，可以這樣做：

(function(){
function tabForward(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event); //取得事件源
if (target.value.length == target.maxLength){ //檢測(cè)輸入的字符是否達(dá)到最大的字符要求
　var form = target.form;//取得該字段所在的表單
for (var i=0, len=form.elements.length; i < len; i++) { //遍歷表單的字段
if (form.elements[i] == target) {//當(dāng)遍歷到當(dāng)前所在的目標(biāo)字段時(shí)，將焦點(diǎn)對(duì)準(zhǔn)下一個(gè)表單字段
if (form.elements[i+1]){
form.elements[i+1].focus();
}
return;
}
}
}
}
var textbox1 = document.getElementById("txtTel1"); //取得目標(biāo)
var textbox2 = document.getElementById("txtTel2");　
var textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward);　//綁定事件
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();

HTML5約束驗(yàn)證API

為了在將表單提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)，HTML5 新增了一些功能。

必填字段：required，例子比如：<input type="text" name="username" required>

type屬性："email"類型要求輸入的文本必須符合電子郵件地址的模式，而"url"類型要求輸入的文本必須符合 URL 的模式。

pattern屬性：這個(gè)屬性的值是一個(gè)正則表達(dá)式，用于匹配文本框中的值。例子如：<input type="text" pattern="\d+" name="count">

禁用驗(yàn)證：通過設(shè)置 novalidate 屬性，可以告訴表單不進(jìn)行驗(yàn)證。 例子如：

<form method="post" action="signup.php" novalidate>
<!--這里插入表單元素-->
</form>

三，選擇框腳本

選擇框是通過<select>和<option>元素創(chuàng)建的。 該類型還提供下列屬性和方法：

add(newOption, relOption)：向控件中插入新<option>元素，其位置在相關(guān)項(xiàng)（relOption）之前。

multiple：布爾值，表示是否允許多項(xiàng)選擇；等價(jià)于 HTML 中的 multiple 特性。

options：控件中所有<option>元素的 HTMLCollection。

remove(index)：移除給定位置的選項(xiàng)。

selectedIndex：基于 0 的選中項(xiàng)的索引，如果沒有選中項(xiàng)，則值為-1。對(duì)于支持多選的控件，只保存選中項(xiàng)中第一項(xiàng)的索引。

size：選擇框中可見的行數(shù)；等價(jià)于 HTML 中的 size 特性。

選擇框的 type 屬性不是"select-one"，就是"select-multiple"，這取決于 HTML 代碼中有沒有 multiple 特性。選擇框的 value 屬性由當(dāng)前選中項(xiàng)決定，相應(yīng)規(guī)則如下。

如果沒有選中的項(xiàng)，則選擇框的 value 屬性保存空字符串。

如果有一個(gè)選中項(xiàng)，而且該項(xiàng)的 value 特性已經(jīng)在 HTML 中指定，則選擇框的 value 屬性等于選中項(xiàng)的 value 特性。即使 value 特性的值是空字符串，也同樣遵循此條規(guī)則。

如果有一個(gè)選中項(xiàng)，但該項(xiàng)的 value 特性在 HTML 中未指定，則選擇框的 value 屬性等于該項(xiàng)的文本。

如果有多個(gè)選中項(xiàng)，則選擇框的 value 屬性將依據(jù)前兩條規(guī)則取得第一個(gè)選中項(xiàng)的值。

選擇選項(xiàng)：

對(duì)于只允許選擇一項(xiàng)的選擇框，訪問選中項(xiàng)的最簡(jiǎn)單方式，就是使用選擇框的 selectedIndex 屬性。例子如：

var selectedOption = selectbox.options[selectbox.selectedIndex];

添加選項(xiàng)：

可以使用 JavaScript 動(dòng)態(tài)創(chuàng)建選項(xiàng)，并將它們添加到選擇框中。

第一種方式就是使用如下所示的 DOM 方法：

var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);

第二種方式是使用 Option 構(gòu)造函數(shù)來(lái)創(chuàng)建新選項(xiàng) :

var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption);

第三種添加新選項(xiàng)的方式是使用選擇框的 add()方法，DOM 規(guī)定這個(gè)方法接受兩個(gè)參數(shù)，要添加的新選項(xiàng)和將位于新選項(xiàng)之后的選項(xiàng) ：

var newOption = new Option("Option text", "Option value"); //
selectbox.add(newOption, undefined); //最佳方案 ，將新選項(xiàng)添加到列表最后

移除選項(xiàng)：

DOM 的 removeChild()方法，為其傳入要移除的選項(xiàng)，如下面的例子所示：

selectbox.removeChild(selectbox.options[0]); //移除第一個(gè)選項(xiàng)

其次，可以使用選擇框的 remove()方法 ：

selectbox.remove(0); //移除第一個(gè)選項(xiàng)

最后一種方式，就是將相應(yīng)選項(xiàng)設(shè)置為 null：

selectbox.options[0] = null; //移除第一個(gè)選項(xiàng)

要清除選擇框中所有的項(xiàng)，需要迭代所有選項(xiàng)并逐個(gè)移除它們 ：

function clearSelectbox(selectbox){
for(var i=0, len=selectbox.options.length; i < len; i++){
selectbox.remove(0);
　}
}

這個(gè)函數(shù)每次只移除選擇框中的第一個(gè)選項(xiàng)。由于移除第一個(gè)選項(xiàng)后，所有后續(xù)選項(xiàng)都會(huì)自動(dòng)向上移動(dòng)一個(gè)位置，因此重復(fù)移除第一個(gè)選項(xiàng)就可以移除所有選項(xiàng)了。

移動(dòng)和重排選項(xiàng)：

如果為 appendChild()方法傳入一個(gè)文檔中已有的元素，那么就會(huì)先從該元素的父節(jié)點(diǎn)中移除它，再把它添加到指定的位置 ：

var selectbox1 = document.getElementById("selLocations1"); //每個(gè)子節(jié)點(diǎn)只有一個(gè)父節(jié)點(diǎn)，所以會(huì)先刪除以前位置的節(jié)點(diǎn)
var selectbox2 = document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);

重排選項(xiàng)次序的過程也十分類似，最好的方式仍然是使用 DOM 方法。要將選擇框中的某一項(xiàng)移動(dòng)到特定位置，最合適的 DOM 方法就是 insertBefore()；

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]); //要在選擇框中向前移動(dòng)一個(gè)選項(xiàng)的位置

表單序列化：

表單序列化簡(jiǎn)單說就是將，各表單字段按名值對(duì)的形式進(jìn)行url編碼。

表單序列化有以下規(guī)則：

　對(duì)表單字段的名稱和值進(jìn)行 URL 編碼，使用和號(hào)（&）分隔。

　不發(fā)送禁用的表單字段。

　只發(fā)送勾選的復(fù)選框和單選按鈕。

　不發(fā)送 type 為"reset"和"button"的按鈕。

　多選選擇框中的每個(gè)選中的值單獨(dú)一個(gè)條目。

　在單擊提交按鈕提交表單的情況下，也會(huì)發(fā)送提交按鈕；否則，不發(fā)送提交按鈕。也包括 type為"image"的<input>元素。

<select>元素的值，就是選中的<option>元素的 value 特性的值。如果<option>元素沒有value 特性，則是<option>元素的文本值。

四，富文本編輯

這一技術(shù)的本質(zhì)，就是在頁(yè)面中嵌入一個(gè)包含空 HTML 頁(yè)面的 iframe。通過設(shè)置 designMode 屬性，這個(gè)空白的 HTML 頁(yè)可以被編輯，而編輯對(duì)象則是該頁(yè)面<body>元素的 HTML 代碼。 designMode 屬性有兩個(gè)可能的值： "off"（默認(rèn)值）和"on"。在設(shè)置為"on"時(shí)，整個(gè)文檔都會(huì)變得可以編輯（顯示插入符號(hào)），然后就可以像使用字處理軟件一樣，通過鍵盤將文本內(nèi)容加粗、變成斜體，等等。另一種編輯富文本內(nèi)容的方式是使用名為 contenteditable 的特殊屬性，這個(gè)屬性也是由 IE 最早實(shí)現(xiàn)的?？梢园?contenteditable 屬性應(yīng)用給頁(yè)面中的任何元素，然后用戶立即就可以編輯該元素。

以上這篇基于JavaScript表單腳本(詳解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論