第7章表單操作7.1概述

7.2表單操作

7.3表單元素操作

7.4表單驗(yàn)證

7.5正則表達(dá)式

7.1概述

大多數(shù)網(wǎng)頁(yè)和用戶之間的交互都發(fā)生在表單中，每個(gè)瀏覽器的表單中都有許多交互式的HTML元素：文本域、按鈕、復(fù)選框和選項(xiàng)列表等。本章重點(diǎn)介紹如何操作表單以及表單元素。

7.2表單操作

7.2.1form對(duì)象

使用最初的DOM語(yǔ)法，可通過(guò)文檔包含的表單數(shù)組索引或名字(如果在<form>標(biāo)記的name屬性中分配了一個(gè)標(biāo)識(shí)符)來(lái)引用form對(duì)象。如果在文檔中只有一個(gè)表單，那么它也是一個(gè)數(shù)組(一個(gè)元素的數(shù)組)的成員，其引用語(yǔ)法如下：7.2.2訪問(wèn)表單屬性

表單完全由網(wǎng)頁(yè)中的標(biāo)準(zhǔn)HTML標(biāo)記語(yǔ)言創(chuàng)建，用戶可設(shè)置name，target，action，method和enctype屬性。這些都是form對(duì)象的屬性，訪問(wèn)它們的語(yǔ)法格式如下：7.2.3form.elements[]屬性

除了跟蹤表單中每一類的元素外，瀏覽器還保留一個(gè)表單中所有控件元素的列表。這個(gè)列表是一個(gè)數(shù)組，其列表項(xiàng)根據(jù)HTML標(biāo)記語(yǔ)言在源代碼中的順序而定。使用元素名字對(duì)于直接創(chuàng)建這些元素的引用非常有效，但對(duì)于需要瀏覽所有表單元素的腳本不太有效，因此文本框的數(shù)目需要根據(jù)具體頁(yè)面需求而改變。

下面的代碼在for循環(huán)中使用form.elements[]屬性查看表單中的所有元素，并將文本框的內(nèi)容清空。由于有些元素是按鈕，沒(méi)有可以設(shè)置為空字符串的value屬性，因此腳本不能簡(jiǎn)單的進(jìn)入表單內(nèi)部，將每個(gè)元素設(shè)置為空字符串。在第一個(gè)語(yǔ)句中，創(chuàng)建一個(gè)變量form，它含有對(duì)文檔第一個(gè)表單的引用，這么做是為了以后在腳本中多次引用表單元素時(shí)能夠節(jié)省代碼，接著對(duì)表單中的elements數(shù)組元素進(jìn)行循環(huán)搜索。每個(gè)表單元素有一個(gè)type屬性，它表示表單元素的類型，文本、按鈕、單選按鈕和復(fù)選框等。當(dāng)表單元素的type屬性為text時(shí)，需要將其value屬性設(shè)置為空字符串。

表單元素的類型如表7-1所示。表7-17.2.4表單方法

表單常用的方法有兩個(gè)，一個(gè)是reset()方法，用于對(duì)表單元素進(jìn)行重置操作，其作用等同于點(diǎn)擊了表單內(nèi)的重置按鈕；另一個(gè)是submit()方法，該方法較為常用，通常用于以代碼的形式執(zhí)行提交表單的操作。

頁(yè)面中有表單，但是沒(méi)有提交按鈕，表單是否能提交呢？當(dāng)然可以，我們可以通過(guò)在JavaScript中調(diào)用表單的submt()方法來(lái)實(shí)現(xiàn)此效果，示例代碼如下所示。

7.3表單元素操作

7.3.1通用屬性

很多表單元素之間有著相同的屬性，這些屬性的作用和用法都是相同的，下面介紹表單元素中常用的通用屬性。

(1)disabled屬性是指禁用某個(gè)控件，使其不可用，用戶不能用鼠標(biāo)對(duì)其進(jìn)行操作，該控件也不能獲得焦點(diǎn)，而且被禁用控件的外表會(huì)被灰化，使其與其他正常的控件區(qū)別開來(lái)，更重要的是，如果該控件被禁用，則當(dāng)表單提交時(shí)，后臺(tái)處理程序不能獲得該禁用控件的對(duì)應(yīng)值。

(2)?readOnly屬性主要是針對(duì)文本框和文本域，該屬性和disabled屬性一樣，對(duì)應(yīng)的都是布爾值類型，true或false，如果文本框被設(shè)置為readOnly即只讀，那么該文本框?qū)⒉荒塬@得焦點(diǎn)，且該文本框不能輸入內(nèi)容也不能修改文本框中的內(nèi)容。這是該屬性和disabled屬性的共同特點(diǎn)，不同的是，readOnly屬性如果設(shè)置為true時(shí)，控件的外觀不會(huì)發(fā)生改變，而且在表單提交的時(shí)候，后臺(tái)應(yīng)用程序依然可以接收到控件對(duì)應(yīng)的值。7.3.2文本框

文本框在頁(yè)面中用于接收用戶的輸入，是一個(gè)使用頻率很高的表單控件，接收各種形式的字符串，下面介紹文本框的常用操作。

通過(guò)value屬性獲得或設(shè)置文本框的內(nèi)容，其語(yǔ)法如下：還可以通過(guò)onfocus屬性給文本框綁定focus事件，在獲得焦點(diǎn)的時(shí)候能夠觸發(fā)此事件，以及相對(duì)應(yīng)的blur事件，該事件會(huì)在失去焦點(diǎn)的時(shí)候觸發(fā)；與此同時(shí)，文本框還有常用事件，如change事件在文本內(nèi)容改變的時(shí)候觸發(fā)，以及keyUp、keyDown、keyPress等常用的鍵盤按鍵事件。7.3.3復(fù)選框

在圖形用戶界面中，復(fù)選框可以在選中與未選中之間切換。兩個(gè)或更多的復(fù)選框在物理上可以組合在一起，但它們之間沒(méi)有相互作用，每一個(gè)都是獨(dú)立設(shè)置的。

復(fù)選框的<input>標(biāo)記默認(rèn)為未選中，在定義中添加常量checked屬性可以預(yù)先設(shè)置選中復(fù)選框，這樣，在網(wǎng)頁(yè)顯示時(shí)該復(fù)選框被選中。復(fù)選框標(biāo)簽文本定義在<input>標(biāo)記外，標(biāo)簽不是復(fù)選框的一部分。下面介紹復(fù)選框的常用屬性：checked屬性。在表格的表頭中，有一個(gè)復(fù)選框用于實(shí)現(xiàn)全選和取消全選的操作，該復(fù)選框和其他復(fù)選框的名字不同，在表頭復(fù)選框中綁定點(diǎn)擊事件，在事件處理程序中將其自身作為參數(shù)傳入事件處理程序，通過(guò)getElementsByName()方法獲得所有同名的復(fù)選框?qū)ο?，循環(huán)修改其checked屬性。

運(yùn)行后，點(diǎn)擊全選復(fù)選框?qū)崿F(xiàn)全選效果，效果如圖7-1所示。圖7-17.3.4單選按鈕

單選按鈕對(duì)象在JavaScript應(yīng)用程序體中不常用。在其他表單控件中，一個(gè)對(duì)象對(duì)應(yīng)于屏幕上一個(gè)可見(jiàn)的元素，但由于單選按鈕的本質(zhì)是在兩個(gè)或多個(gè)選項(xiàng)中進(jìn)行互斥選擇，因此，單選按鈕對(duì)象實(shí)際上由一組單選按鈕組成，一組中常常有多個(gè)可見(jiàn)元素。組中的所有單選按鈕共享一個(gè)名字，瀏覽器知道如何將單選按鈕組合在一起，然后在單選按鈕組中通過(guò)一個(gè)單選按鈕的單擊事件取消其他單選按鈕的選中狀態(tài)。除此之外，每個(gè)單選按鈕都可以有自己的屬性，比如value或checked屬性。

JavaScript數(shù)組語(yǔ)法能訪問(wèn)單選按鈕組中某個(gè)單選按鈕的信息?？纯聪旅孢@個(gè)示例。上述代碼循環(huán)遍歷每一個(gè)單選按鈕元素，然后通過(guò)其checked屬性來(lái)判斷其是否被選中，如果有選中項(xiàng)，則直接返回true，如果循環(huán)已經(jīng)遍歷完了還是沒(méi)有選中項(xiàng)，說(shuō)明確實(shí)沒(méi)有選中一項(xiàng)，所以直接返回false。7.3.5下拉框?qū)ο?/p>

在網(wǎng)頁(yè)中，選擇列表可以使用相對(duì)較小的空間來(lái)提供大量的信息。網(wǎng)頁(yè)上的選擇列表包括彈出式和滾動(dòng)式兩種形式。

與其他JavaScript對(duì)象相比，由于列表項(xiàng)數(shù)據(jù)的復(fù)雜性，因此在腳本中使用select元素對(duì)象時(shí)比較復(fù)雜。select元素由select元素對(duì)象和option元素對(duì)象組成，option元素對(duì)象包含用戶選擇的真正選項(xiàng)，一些對(duì)腳本設(shè)計(jì)者非常有價(jià)值的屬性屬于select對(duì)象，而其余的屬性屬于嵌套的option對(duì)象。例如，可以提取列表中當(dāng)前選項(xiàng)的編號(hào)(索引)，它是整個(gè)select對(duì)象的一個(gè)屬性，但為得到選中選項(xiàng)的顯示文本，必須得到為對(duì)象定義的所有選項(xiàng)中單個(gè)選項(xiàng)的text屬性。在表單中定義一個(gè)select對(duì)象時(shí)，<select></select>標(biāo)記對(duì)的構(gòu)造很容易產(chǎn)生混淆。首先，定義整個(gè)對(duì)象的大多數(shù)特性(如name屬性、size屬性和事件處理程序等)都是開始<select>標(biāo)記的特性。在開始標(biāo)記的結(jié)束處和結(jié)尾</select>標(biāo)記之間，包含顯示在列表中的每個(gè)選項(xiàng)的額外標(biāo)記。下面的對(duì)象定義創(chuàng)建了一個(gè)選擇彈出式列表，它包含三個(gè)顏色選項(xiàng)，具體代碼如下：

在默認(rèn)情況下，select元素作為彈出式列表顯示，為把它顯示為滾動(dòng)式列表，需要賦給size屬性一個(gè)大于1的整數(shù)值，用這個(gè)值指定列表中不需要滾動(dòng)就能顯示的選項(xiàng)個(gè)數(shù)，也就是列表框的高度，以行數(shù)計(jì)量。

下面介紹select元素的常用屬性。

(1)value屬性：select元素的value屬性用于獲得選中項(xiàng)的值，如果該選中項(xiàng)未設(shè)定value屬性，則返回的是空字符串。下列代碼顯示如何獲得選中項(xiàng)值。

(3)selectedIndex屬性：當(dāng)用戶在選擇列表中做出一個(gè)選擇時(shí)，selectedIndex屬性改變?yōu)榱斜碇邢鄳?yīng)選項(xiàng)的編號(hào)，第一個(gè)選項(xiàng)的編號(hào)為0。對(duì)于需要提取這個(gè)編號(hào)或選中選項(xiàng)的文本以便做進(jìn)一步處理的腳本來(lái)說(shuō)，這一信息非常有用：可以用這一信息作為獲得選中項(xiàng)屬性的捷徑。要檢查一個(gè)select對(duì)象的selected屬性，不必循環(huán)遍歷每個(gè)選項(xiàng)，可以使用對(duì)象的selectedIndex屬性作為選中項(xiàng)的引用填入索引值。在這種情況下，語(yǔ)句可能比較長(zhǎng)，但從執(zhí)行的角度來(lái)看，這個(gè)方法是最有效的。然而，如果select對(duì)象是多項(xiàng)選擇類型，那么selectedIndex屬性的值就表示列表中所有選中項(xiàng)的第一項(xiàng)的索引。 7.4表單驗(yàn)證

表單在提交的時(shí)候會(huì)觸發(fā)一個(gè)事件——submit事件，該事件可以通過(guò)<form>標(biāo)簽的onsubmit屬性進(jìn)行綁定和設(shè)置，這樣在表單提交的時(shí)候可以觸發(fā)，執(zhí)行相關(guān)的事件函數(shù)。

表單的作用是提交數(shù)據(jù)到服務(wù)器，如果用戶填寫的數(shù)據(jù)不規(guī)范，則提交到后臺(tái)的數(shù)據(jù)可能影響后臺(tái)程序的運(yùn)行，為了保證數(shù)據(jù)的規(guī)范性，可以在提交表單時(shí)對(duì)表單進(jìn)行數(shù)據(jù)驗(yàn)證，可以在表單的onsubmit事件處理程序調(diào)用的函數(shù)中完成這項(xiàng)工作。如果驗(yàn)證發(fā)現(xiàn)了一些不正確的數(shù)據(jù)或空白域，那么就可以根據(jù)驗(yàn)證函數(shù)的結(jié)果取消提交。為了控制這個(gè)提交，onsubmit事件處理程序必須求值得到returntrue(允許繼續(xù)提交)或returnfalse(取消提交)。它不僅需要調(diào)用的函數(shù)返回true或false，而且return關(guān)鍵字必須是最終值的一部分。程序運(yùn)行后，如果未填寫內(nèi)容直接點(diǎn)擊“提交”按鈕，則會(huì)給出相應(yīng)警告提示，同時(shí)中止表單的提交。運(yùn)行效果如圖7-2所示。圖7-2上述代碼給我們演示了一個(gè)最簡(jiǎn)單的表單驗(yàn)證的驗(yàn)證流程，而實(shí)際上，表單驗(yàn)證遠(yuǎn)遠(yuǎn)不止這么簡(jiǎn)單，它需要根據(jù)不同的業(yè)務(wù)需求和不同的表單控件采取不同的驗(yàn)證方法。比如驗(yàn)證輸入的內(nèi)容是否為數(shù)值，可以調(diào)用isNaN()方法來(lái)進(jìn)行。

下面給大家演示一個(gè)較為完整的表單驗(yàn)證示例，該表單中涵蓋了多種表單控件。在上述代碼中，對(duì)一個(gè)用戶注冊(cè)頁(yè)面進(jìn)行了表單數(shù)據(jù)提交的驗(yàn)證，在驗(yàn)證中對(duì)用戶名、密碼以及重復(fù)密碼進(jìn)行了非空驗(yàn)證，同時(shí)對(duì)兩次密碼進(jìn)行比對(duì)，要求兩次填寫的密碼必須一致。

在上述驗(yàn)證中，如果驗(yàn)證失敗，則通過(guò)alert()函數(shù)彈出警告框提示，與此同時(shí)，還可以通過(guò)在文本框后面添加div或者label元素的形式，將錯(cuò)誤消息顯示在文本框后面，這樣便不會(huì)中斷用戶操作了。上述代碼運(yùn)行后的頁(yè)面效果如圖7-3所示。圖7-3圖7-4

7.5正?則?表?達(dá)?式

正則表達(dá)式，又稱正規(guī)表示法、常規(guī)表示法(英語(yǔ)：RegularExpression，在代碼中常簡(jiǎn)寫為regex、regexp或RE)，是計(jì)算機(jī)科學(xué)的一個(gè)概念。正則表達(dá)式使用單個(gè)字符串來(lái)描述、匹配一系列符合某個(gè)句法規(guī)則的字符串。在很多文本編輯器里，正則表達(dá)式通常被用來(lái)檢索、替換那些符合某個(gè)模式的文本。為什么需要正則表達(dá)式，因?yàn)樗軌蚝?jiǎn)潔代碼，并嚴(yán)謹(jǐn)?shù)尿?yàn)證文本框中的內(nèi)容。表7-2圖7-5示例2：對(duì)年齡進(jìn)行驗(yàn)證，年齡必須在0～120之間。

說(shuō)明：①10～99這個(gè)范圍都是兩位數(shù)，十位是1～9，個(gè)位是0～9，正則表達(dá)式為[1-9]\d。

②0～9這個(gè)范圍是一位，正則表達(dá)