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

2024-05-06 14:11:27

字體：大中小

供稿：網(wǎng)友

表單實(shí)例
這是一個(gè)表單的實(shí)力。這里有一個(gè)小問(wèn)題：因?yàn)槲业姆?wù)器現(xiàn)在不支持，所以表單不能提交。我會(huì)打印出你的輸入，然后返回一個(gè)false，這樣表單就沒(méi)有被提交。
onSubmit的代碼做了兩件事情：檢查你是否在四個(gè)文本框里面都填寫(xiě)了數(shù)據(jù)，然后把所有的元素都連接起來(lái)打印在下面的文本區(qū)域中。
原文中有實(shí)例，需要童鞋請(qǐng)移步，我就不搬過(guò)來(lái)了。
檢測(cè)文本區(qū)域
這段代碼會(huì)檢測(cè)用戶(hù)是否在文本框內(nèi)輸入了內(nèi)容。他會(huì)忽略復(fù)選框和單選框，但是會(huì)總提醒用戶(hù)選擇select box，就算你選了，也會(huì)提醒，因?yàn)樗闹悼偸莕ull。所以最好在你只是用來(lái)檢測(cè)文本段的時(shí)候使用這段代碼。
代碼如下:
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ù)字好過(guò)name的一個(gè)例子。
代碼如下: for (i=0;i<4;i++) {
然后我創(chuàng)建一個(gè)變量box，用來(lái)訪(fǎng)問(wèn)當(dāng)前元素。如果不創(chuàng)建的話(huà)，我就需要把document.example.elements[i]寫(xiě)上好幾遍，我可懶得寫(xiě)。
代碼如下: box = document.example.elements[i];
如果這個(gè)文本框的值為空，那么我們就需要做：
代碼如下: if (!box.value) {
首先我們使用文本框的name，如果你的命名比較明白，那么用戶(hù)也會(huì)比較好理解是哪個(gè)文本框除了問(wèn)題。
代碼如下: alert('You haven/'t filled in ' + box.name + '!');
作為一個(gè)附加服務(wù)，我們把焦點(diǎn)放置在有問(wèn)題的文本框上，這樣用戶(hù)就能夠馬上填寫(xiě)了。因?yàn)樗械臑g覽器都支持，所以也不需要做檢測(cè)：
代碼如下: box.focus()
然后我們返回一個(gè)false。代碼停止運(yùn)行，表單也不會(huì)提交。等待用戶(hù)輸入。
代碼如下: return false;
如果所有的文本框都填寫(xiě)了，返回true，以表示一切正常。函數(shù)停止，表單提交。
代碼如下:
}
}
return true;

翻譯地址：http://www.quirksmode.org/js/formex.html
轉(zhuǎn)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)

上一篇：JavaScript CSS修改學(xué)習(xí)第二章樣式

下一篇：jquery validator 插件增加日期比較方法