【翻譯作品】JavaScript DOM學習第六章：表單一實例

在這一章我有一個檢查使用者輸入然後列印使用者輸入的表單和代碼。下面我會著重講解檢測文本的代碼。

 

表單一實例

這是一個表單的實力。這裡有一個小問題：因為我的伺服器現在不支援，所以表單不能提交。我會列印出你的輸入，然後返回一個false，這樣表單就沒有被提交。

onSubmit的代碼做了兩件事情：檢查你是否在四個文字框裡面都填寫了資料，然後把所有的元素都串連起來列印在下面的文本地區中。

原文中有執行個體，需要童鞋請移步，我就不搬過來了。

 

檢測文本地區

這段代碼會檢測使用者是否在文字框內輸入了內容。他會忽略複選框和單選框，但是會總提醒使用者選擇select box，就算你選了，也會提醒，因為他的值總是null。所以最好在你只是用來檢測文本段的時候使用這段代碼。

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;}
在這個例子中，我想檢查0--3號元素，所以我設定一個變數i。你會注意到，我使用的是數字而不是使用name。這個就是數字好過name的一個例子。
for (i=0;i<4;i++) {
然後我建立一個變數box，用來訪問當前元素。如果不建立的話，我就需要把document.example.elements[i]寫上好幾遍，我可懶得寫。
box = document.example.elements[i];
如果這個文字框的值為空白，那麼我們就需要做：
if (!box.value) {
首先我們使用文字框的name，如果你的命名比較明白，那麼使用者也會比較好理解是哪個文字框除了問題。
alert('You haven\'t filled in ' + box.name + '!');
作為一個附加服務，我們把焦點放置在有問題的文字框上，這樣使用者就能夠馬上填寫了。因為所有的瀏覽器都支援，所以也不需要做檢測：
box.focus()
然後我們返回一個false。代碼停止運行，表單也不會提交。等待使用者輸入。
return false;
如果所有的文字框都填寫了，返回true，以表示一切正常。函數停止，表單提交。
}}return true;
 
翻譯地址：http://www.quirksmode.org/js/formex.html