快捷導(dǎo)航

JavaScript DOM學(xué)習(xí)第六章表單實(shí)例

更新時(shí)間：2010年02月19日 13:45:33 作者：

在這一章我有一個(gè)檢查用戶輸入然后打印用戶輸入的表單和代碼。下面我會(huì)著重講解檢測文本的代碼。

表單實(shí)例
這是一個(gè)表單的實(shí)力。這里有一個(gè)小問題：因?yàn)槲业姆?wù)器現(xiàn)在不支持，所以表單不能提交。我會(huì)打印出你的輸入，然后返回一個(gè)false，這樣表單就沒有被提交。
onSubmit的代碼做了兩件事情：檢查你是否在四個(gè)文本框里面都填寫了數(shù)據(jù)，然后把所有的元素都連接起來打印在下面的文本區(qū)域中。
原文中有實(shí)例，需要童鞋請(qǐng)移步，我就不搬過來了。
檢測文本區(qū)域
這段代碼會(huì)檢測用戶是否在文本框內(nèi)輸入了內(nèi)容。他會(huì)忽略復(fù)選框和單選框，但是會(huì)總提醒用戶選擇select box，就算你選了，也會(huì)提醒，因?yàn)樗闹悼偸莕ull。所以最好在你只是用來檢測文本段的時(shí)候使用這段代碼。

復(fù)制代碼代碼如下:

 
function checkscript() { 
    for (i=0;i<4;i++) { 
        box = document.example.elements[i]; 
        if (!box.value) { 
            alert('You haven\'t filled in ' + box.name + '!'); 
            box.focus() 
            return false; 
        } 
    } 
    return true; 
} 

在這個(gè)例子中，我想檢查0--3號(hào)元素，所以我設(shè)置一個(gè)變量i。你會(huì)注意到，我使用的是數(shù)字而不是使用name。這個(gè)就是數(shù)字好過name的一個(gè)例子。

復(fù)制代碼代碼如下:

for (i=0;i<4;i++) {

然后我創(chuàng)建一個(gè)變量box，用來訪問當(dāng)前元素。如果不創(chuàng)建的話，我就需要把document.example.elements[i]寫上好幾遍，我可懶得寫。

復(fù)制代碼代碼如下:

box = document.example.elements[i];

如果這個(gè)文本框的值為空，那么我們就需要做：

復(fù)制代碼代碼如下:

if (!box.value) {

首先我們使用文本框的name，如果你的命名比較明白，那么用戶也會(huì)比較好理解是哪個(gè)文本框除了問題。

復(fù)制代碼代碼如下:

alert('You haven\'t filled in ' + box.name + '!');