DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript DOM學習第六章 表單實例
JavaScript DOM學習第六章 表單實例
編輯:JavaScript基礎知識     
表單實例
這是一個表單的實力。這裡有一個小問題:因為我的服務器現在不支持,所以表單不能提交。我會打印出你的輸入,然後返回一個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
轉載請保留以下信息
作者:北玉(tw:@rehawk)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved