因?yàn)槊恳粋€(gè)表單的檢測(cè)項(xiàng)都不同，所以我也不能給你一個(gè)萬(wàn)能的代碼。你需要用我在這一章介紹的這些元素構(gòu)建自己的檢測(cè)函數(shù)。我在后面一張還有一個(gè)例子，你也可以參考。

在這一章我會(huì)首先討論一下用JavaScript來(lái)檢測(cè)表單的局限性，然后會(huì)解釋一下提交時(shí)間處理程序，然后是表單本身的一些方法和屬性。最后就是如何訪問(wèn)表單元素。

這里還有一篇Jeff Howden的介紹表單的使用錯(cuò)誤和解決辦法。Forms & JavaScript Living Together in Harmony
局限性
首先，你需要了解當(dāng)用戶提交了表單之后JavaScript的檢測(cè)代碼會(huì)做什么：
1、JavaScript檢測(cè)表單時(shí)可能會(huì)像下面這樣。如果代碼發(fā)現(xiàn)了一個(gè)錯(cuò)誤，那么提交就會(huì)暫停，然后給用戶一個(gè)警告讓他輸入正確的數(shù)據(jù)。
2、如果沒(méi)有什么錯(cuò)誤或者JavaScript是關(guān)閉的那么表單內(nèi)容就發(fā)送到服務(wù)器端。
3、如果服務(wù)器端的腳本發(fā)現(xiàn)了錯(cuò)誤，就會(huì)返回一些錯(cuò)誤信息。在這種情形下，用戶需要返回表單然后重新填寫(xiě)數(shù)據(jù)再次提交。
4、如果沒(méi)有錯(cuò)誤發(fā)生，那么服務(wù)器端完成必要的工作并顯示感謝信息。
就像你所看到的，數(shù)據(jù)在提交過(guò)程中會(huì)檢測(cè)兩次：一次是JavaScript一次是服務(wù)端。服務(wù)端檢測(cè)總是可行的，而且是可靠的。JavaScript的檢測(cè)只有在用戶開(kāi)啟JavaScript功能的時(shí)候才有用，那么既然服務(wù)端總是可靠有效，并且與用戶使用的瀏覽器無(wú)關(guān)，那么為什么還需要JavaScript檢測(cè)呢？
JavaScript檢測(cè)是服務(wù)器端檢測(cè)的一個(gè)有效補(bǔ)充，因?yàn)樗茉跀?shù)據(jù)發(fā)往服務(wù)器端的時(shí)候先檢測(cè)一遍。這樣用戶就不用使用后退按鈕回去修改表單內(nèi)容，那樣會(huì)很麻煩，而且在尋找填錯(cuò)的內(nèi)容也是一件相當(dāng)麻煩的事情。所以JavaScript檢測(cè)比服務(wù)器端檢測(cè)對(duì)用戶的使用體驗(yàn)幫助更大。
所以JavaScript不是一個(gè)完全的檢測(cè)機(jī)制，但是作為服務(wù)器端的補(bǔ)充和對(duì)用戶的友好性來(lái)講還是一個(gè)不錯(cuò)選擇。所以我建議使用這兩種檢測(cè)機(jī)制，既滿足了用戶的使用體驗(yàn)要求又保證了程序的安全性。
onsubmit
當(dāng)你使用JavaScript來(lái)檢測(cè)表單的時(shí)候，第一個(gè)事情就是創(chuàng)建onsubmit的事件處理程序。這個(gè)程序會(huì)在用戶提交表單的時(shí)候運(yùn)行。這個(gè)程序會(huì)檢測(cè)某些字段是否有值填寫(xiě)，那些復(fù)選框是否選擇了至少一個(gè)，或者其他的你需要檢測(cè)內(nèi)容。
代碼如下：
復(fù)制代碼 代碼如下:
<form action="something.pl" onsubmit="return checkscript()">

checkscript()就是這個(gè)程序的名字。這段代碼需要返回true或者false。如果返回的是false，那么表單就不會(huì)被提交，不論返回true還是false代碼都會(huì)停止運(yùn)行。
所以生成的代碼如下：
復(fù)制代碼 代碼如下:
function checkscript() {
    if (some value is/is not something) {
        // something is wrong
        alert('alert user of problem');
        return false;
    }
    else if (another value is/is not something) {
        // something else is wrong
        alert('alert user of problem');
        return false;
    }
    // If the script makes it to here, everything is OK,
    // so you can submit the form
    return true;
}

當(dāng)然這段代碼可以寫(xiě)的很復(fù)雜，如果你需要檢測(cè)很多表單項(xiàng)目或者一大堆的單選框。基本思想就是這樣了：你遍歷表單里的每一個(gè)需要檢查的元素，如果發(fā)現(xiàn)了錯(cuò)誤就返回false，然后代碼停止運(yùn)行，表單也不會(huì)被提交。
當(dāng)你發(fā)現(xiàn)了錯(cuò)誤的時(shí)候，你應(yīng)該提醒用戶。可以用一個(gè)警告框，不過(guò)今天大多數(shù)的辦法是生成一條錯(cuò)誤信息然后添加在錯(cuò)誤條目的后面。
只有在最后地方，你檢查過(guò)了所有的元素并且沒(méi)有發(fā)現(xiàn)錯(cuò)誤，那么你就返回true，表單就會(huì)被提交。
表單的方法和屬性
JavaScript對(duì)于處理表單還有一些內(nèi)建的方法和屬性。其中三個(gè)比較重要：
你可以用submit()方法來(lái)提交表單。提交頁(yè)面的第一個(gè)表單你可以寫(xiě)：
復(fù)制代碼 代碼如下: document.forms[0].submit()
注意當(dāng)用戶使用JavaScript提交表單的時(shí)候，表單的事件處理程序就不起作用了。
重置表單，你可以：
[code] document.forms[0].reset()
我假設(shè)，沒(méi)有做測(cè)試，你如果使用這個(gè)方法，那么重置表單的事件處理程序也就不會(huì)執(zhí)行。
最后你可以修改表單的ACTION項(xiàng)：
[code] document.forms[0].action = 'the_other_script.pl';
如果表單在某些情況需要提交給其他頁(yè)面的時(shí)候這個(gè)方法就相當(dāng)方便。
訪問(wèn)表單元素
表單的有效性檢測(cè)需要訪問(wèn)到表單的元素才能知道用戶填了什么內(nèi)容進(jìn)去。所以首先我們需要根據(jù)Level 0 DOM來(lái)訪問(wèn)表單。一般這樣寫(xiě)：
[code] document.forms[number].elements[number]
當(dāng)頁(yè)面加載之后，JavaScript就會(huì)生成一個(gè)forms數(shù)組用來(lái)存儲(chǔ)頁(yè)面上所有的表單。所以第一個(gè)表單就是forms[0]，第二個(gè)就是forms[1]等等。
JavaScript把表單里面的每個(gè)元素也存儲(chǔ)進(jìn)了一個(gè)數(shù)組。第一個(gè)元素就是elements[0]，第二個(gè)就是elements[1]。所有的input，select，textarea都是一個(gè)元素。
有些時(shí)候，最好還是使用表單和元素的name比較好。在HTML中，你需要給每個(gè)元素命名，比如：
[code] <form name="personal" action="something.pl" onsubmit="return checkscript()"> 2 <input type=text size=20 name=name> 3 <input type=text size=20 name=address> 4 <input type=text size=20 name=city> 5 </form>
現(xiàn)在你就可以通過(guò)下面的方法來(lái)訪問(wèn)元素：
[code] document.personal.name 2 document.personal.address 3 document.personal.city
使用name的好處就在于你能把頁(yè)面的所有元素順序打亂的時(shí)候代碼依然能夠運(yùn)行，如果用數(shù)組就不行。比如上面例子中的city的輸入框是document.forms[0].elements[2]，但是當(dāng)你把他放在第一個(gè)的時(shí)候就變成了document.forms[0].element[0]，這時(shí)候你就得改代碼了。
值的檢測(cè)
當(dāng)然，最重要的事情還是找出用戶填進(jìn)去的值或者選擇了的復(fù)選框。有些時(shí)候你還想填一些其他信息在表單里。
下面的這些小段的代碼能夠幫助你訪問(wèn)到表單里的元素。所有的都是把用戶輸入保存在user_input變量中。之后，你就可以檢測(cè)有效性了。
Texts，textarea和隱藏的字段
非常簡(jiǎn)單：
[code] user_input = document.forms[0].text.value
其中text就是文本框或者textarea或者隱藏字段的name。value屬性就會(huì)給出這些元素的文本，然后存儲(chǔ)在user_input里。
直接寫(xiě)也可以：
復(fù)制代碼 代碼如下: document.forms[0].text.value = 'The new value';
Select Boxes
這也很簡(jiǎn)單：
復(fù)制代碼 代碼如下: user_input = document.forms[0].select.value;
要更改他的選擇項(xiàng)目，就必須修改selectedIndex，比如：
復(fù)制代碼 代碼如下: document.forms[0].select.selectedIndex = 2;
現(xiàn)在第三個(gè)選項(xiàng)就被選擇了。
舊的瀏覽器
在舊的瀏覽器里面select boxes沒(méi)有value屬性，那么：
復(fù)制代碼 代碼如下:
var selectBox = document.forms[0].select;
user_input = selectBox.options[selectBox.selectedIndex].value

首先找出用戶選擇了的項(xiàng)目。document.forms[0].select.selectedIndex給出了選擇項(xiàng)目的編號(hào)。JavaScript已經(jīng)創(chuàng)建了一個(gè)包含所有select boxes選項(xiàng)的options數(shù)組。所以通過(guò)這個(gè)數(shù)組就能知道用戶選擇了什么，然后存儲(chǔ)在user_input里面。
checkboxes
checkboxes有一些小小的不同。我們已經(jīng)知道了他的值，但是需要知道用戶是否選擇了他。checked屬性可以告訴我們。他有true和false兩個(gè)值。
那么：
復(fù)制代碼 代碼如下:
if (document.forms[0].checkbox.checked) {
user_input = document.forms[0].checkbox.name
}

checkbox是復(fù)選框的名字。如果復(fù)選框被選擇了，我們就得到名字（你也可以選擇得到值）然后傳遞給user_input。
選擇一個(gè)復(fù)選框可以：
復(fù)制代碼 代碼如下: document.forms[0].checkbox.checked = true
單選框
不幸的是，你不能一下子就找到哪個(gè)單選框被選中了。只能在遍歷之后查找checked屬性為true的那一項(xiàng)。
復(fù)制代碼 代碼如下:
for (i=0;i<document.forms[0].radios.length;i++) {
if (document.forms[0].radios[i].checked) {
user_input = document.forms[0].radios[i].value;
}
}

radios就是這一組單選框的名字。
注意document.forms[0].radios是包含所有單選框的數(shù)組，循環(huán)檢測(cè)是否checked的屬性為true。如果是則傳遞個(gè)user_input。
document.forms[0].radios.length返回所有單選框的數(shù)目。
如果選擇一個(gè)單選框，我們可以設(shè)置它的checked的值為true：
復(fù)制代碼 代碼如下: document.forms[0].radios[i].checked = true;
翻譯地址：http://www.quirksmode.org/js/forms.html
轉(zhuǎn)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)

JavaScript技術(shù)：JavaScript DOM 學(xué)習(xí)第五章 表單簡(jiǎn)介，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。