JavaScript DOM學(xué)習(xí)第六章 表單實(shí)例
更新時(shí)間：2010年02月19日 13:45:33 作者：
在這一章我有一個(gè)檢查用戶輸入然后打印用戶輸入的表單和代碼。下面我會(huì)著重講解檢測(cè)文本的代碼。
表單實(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è)用戶是否在文本框內(nèi)輸入了內(nèi)容。他會(huì)忽略復(fù)選框和單選框，但是會(huì)總提醒用戶選擇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è)例子。
然后我創(chuàng)建一個(gè)變量box，用來(lái)訪問(wèn)當(dāng)前元素。如果不創(chuàng)建的話，我就需要把document.example.elements[i]寫(xiě)上好幾遍，我可懶得寫(xiě)。
如果這個(gè)文本框的值為空，那么我們就需要做：
首先我們使用文本框的name，如果你的命名比較明白，那么用戶也會(huì)比較好理解是哪個(gè)文本框除了問(wèn)題。
作為一個(gè)附加服務(wù)，我們把焦點(diǎn)放置在有問(wèn)題的文本框上，這樣用戶就能夠馬上填寫(xiě)了。因?yàn)樗械臑g覽器都支持，所以也不需要做檢測(cè)：
然后我們返回一個(gè)false。代碼停止運(yùn)行，表單也不會(huì)提交。等待用戶輸入。
如果所有的文本框都填寫(xiě)了，返回true，以表示一切正常。函數(shù)停止，表單提交。
}
}
return true;
翻譯地址：http://www.quirksmode.org/js/formex.html
轉(zhuǎn)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)
這是一個(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è)用戶是否在文本框內(nèi)輸入了內(nèi)容。他會(huì)忽略復(fù)選框和單選框，但是會(huì)總提醒用戶選擇select box，就算你選了，也會(huì)提醒，因?yàn)樗闹悼偸莕ull。所以最好在你只是用來(lái)檢測(cè)文本段的時(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ù)字好過(guò)name的一個(gè)例子。
復(fù)制代碼 代碼如下:
for (i=0;i<4;i++) {
然后我創(chuàng)建一個(gè)變量box，用來(lái)訪問(wèn)當(dāng)前元素。如果不創(chuàng)建的話，我就需要把document.example.elements[i]寫(xiě)上好幾遍，我可懶得寫(xiě)。
復(fù)制代碼 代碼如下:
box = document.example.elements[i];
如果這個(gè)文本框的值為空，那么我們就需要做：
復(fù)制代碼 代碼如下:
if (!box.value) {
首先我們使用文本框的name，如果你的命名比較明白，那么用戶也會(huì)比較好理解是哪個(gè)文本框除了問(wèn)題。
復(fù)制代碼 代碼如下:
alert('You haven\'t filled in ' + box.name + '!');
作為一個(gè)附加服務(wù)，我們把焦點(diǎn)放置在有問(wèn)題的文本框上，這樣用戶就能夠馬上填寫(xiě)了。因?yàn)樗械臑g覽器都支持，所以也不需要做檢測(cè)：
復(fù)制代碼 代碼如下:
box.focus()
然后我們返回一個(gè)false。代碼停止運(yùn)行，表單也不會(huì)提交。等待用戶輸入。
復(fù)制代碼 代碼如下:
return false;
如果所有的文本框都填寫(xiě)了，返回true，以表示一切正常。函數(shù)停止，表單提交。
復(fù)制代碼 代碼如下:
}
}
return true;
翻譯地址：http://www.quirksmode.org/js/formex.html
轉(zhuǎn)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)
您可能感興趣的文章:
- IE在DOM操作有表單控件時(shí)的bug
- JavaScript DOM 學(xué)習(xí)第五章 表單簡(jiǎn)介
- JavaScript DOM 學(xué)習(xí)第七章 表單的擴(kuò)展
- JavaScript DOM學(xué)習(xí)第八章 表單錯(cuò)誤提示
- JQuery動(dòng)態(tài)創(chuàng)建DOM、表單元素的實(shí)現(xiàn)代碼
- 使用原生javascript創(chuàng)建通用表單驗(yàn)證——更鋒利的使用dom對(duì)象
- jquery中dom操作和事件的實(shí)例學(xué)習(xí)-表單驗(yàn)證
- DOM基礎(chǔ)教程之使用DOM控制表單
相關(guān)文章
jQuery中文入門(mén)指南，翻譯加實(shí)例，jQuery的起點(diǎn)教程
jQuery中文入門(mén)指南，翻譯加實(shí)例，jQuery的起點(diǎn)教程...2007-02-02
Javascript開(kāi)發(fā)之三數(shù)組對(duì)象實(shí)例介紹
Javascript開(kāi)發(fā)之三組數(shù)對(duì)象詳細(xì)介紹，需要的朋友可以參考下
2012-11-11 
JavaScript中的this,call,apply使用及區(qū)別詳解
本文結(jié)合基本javascript的權(quán)威書(shū)籍中的內(nèi)容，根據(jù)自己的理解，通過(guò)相關(guān)示例向大家展示了javascript中this,call,apply使用及區(qū)別，非常的細(xì)致全面，希望大家能夠喜歡。
2016-01-01 
這篇文章主要介紹了Js逆向教程作用域和自執(zhí)行函數(shù)介紹，本文章內(nèi)容詳細(xì)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助，需要的朋友可以參考下
2023-01-01 
本文詳細(xì)講解了JavaScript自定義函數(shù)的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-03-03 
這篇文章主要介紹了S的組成與基本語(yǔ)法，JS 主要是用來(lái)開(kāi)發(fā)前端,但是也可以做別的,JS 現(xiàn)在是一個(gè) "通用" 的編程語(yǔ)言，感興趣的小伙伴可以參考閱讀
2023-04-04 
javascript學(xué)習(xí)筆記(六) Date 日期類型
javascript學(xué)習(xí)筆記之Date 日期類型介紹，需要的朋友可以參考下
2012-06-06 
JavaScript字符串對(duì)象replace方法實(shí)例（用于字符串替換或正則替換）
這篇文章主要介紹了JavaScript字符串對(duì)象replace方法實(shí)例,replace方法用于字符串替換,同時(shí)支持正則表達(dá)式替換,需要的朋友可以參考下
2014-10-10 
Javascript腳本中，引用的參數(shù)內(nèi)部可以修改，但參數(shù)對(duì)應(yīng)的引用不能修改，下面為大家詳細(xì)介紹下
2014-02-02