js溫故而知新10(操作表單)——學習廖雪峰的js教程

simon_chen 發布于2019-08-20 15:08 / 2428人閱讀

摘要：用操作表單和操作是類似的，因為表單本身也是樹。因此，第二種方式是響應本身的事件，在提交時作修改可以在此修改的繼續下一步注意要來告訴瀏覽器繼續提交，如果，瀏覽器將不會繼續提交，這種情況通常對應用戶輸入有誤，提示用戶錯誤信息后終止提交。

用JavaScript操作表單和操作DOM是類似的，因為表單本身也是DOM樹。

HTML表單的輸入控件主要有以下幾種：

文本框，對應的，用于輸入文本；

口令框，對應的，用于輸入口令；

單選框，對應的，用于選擇一項；

復選框，對應的，用于選擇多項；

下拉框，對應的，用戶不可見，但表單提交時會把隱藏文本發送到服務器。

獲取值

如果我們獲得了一個節點的引用，就可以直接調用value獲得對應的用戶輸入值：

// 
var input = document.getElementById("email");
input.value; // "用戶輸入的值"

這種方式可以應用于text、password、hidden以及select。但是，對于單選框和復選框，value屬性返回的永遠是HTML預設的值，而我們需要獲得的實際是用戶是否“勾上了”選項，所以應該用checked判斷：

//  Monday
//  Tuesday
var mon = document.getElementById("monday");
var tue = document.getElementById("tuesday");
mon.value; // "1"
tue.value; // "2"
mon.checked; // true或者false
tue.checked; // true或者false

設置值

設置值和獲取值類似，對于text、password、hidden以及select，直接設置value就可以：

// 
var input = document.getElementById("email");
input.value = "test@example.com"; // 文本框的內容已更新

對于單選框和復選框，設置checked為true或false即可

HTML5控件

HTML5新增了大量標準控件，常用的包括date、datetime、datetime-local、color等，它們都使用標簽

提交表單

方式一是通過

這種方式的缺點是擾亂了瀏覽器對form的正常提交。瀏覽器默認點擊

注意要return true來告訴瀏覽器繼續提交，如果return false，瀏覽器將不會繼續提交form，這種情況通常對應用戶輸入有誤，提示用戶錯誤信息后終止提交form。

在檢查和修改時，要充分利用來傳遞數據。

例如，很多登錄表單希望用戶輸入用戶名和口令，但是，安全考慮，提交表單時不傳輸明文口令，而是口令的MD5。普通JavaScript開發人員會直接修改：toMD5

這個做法看上去沒啥問題，但用戶輸入了口令提交時，口令框的顯示會突然從幾個變成32個（因為MD5有32個字符）。

要想不改變用戶的輸入，可以利用實現：

注意到id為md5-password的標記了name="password"，而用戶輸入的id為input-password的沒有name屬性。沒有name屬性的的數據不會被提交。

操作文件

云服務器 GPU云服務器廖雪峰的python教程 python教程廖雪峰 python廖雪峰教程廖雪峰python視頻教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82020.html

js溫故而知新11(AJAX)——學習廖雪峰的js教程

摘要：在回調函數中，通常我們只需通過判斷請求是否完成，如果已完成，再根據判斷是否是一個成功的響應。因此我們需要首先在頁面中準備好回調函數當前價格最后用函數觸發表示本域，也就是瀏覽器當前頁面的域。 Asynchronous JavaScript and XML，意思就是用JavaScript執行異步網絡請求。如果仔細觀察一個Form的提交，你就會發現，一旦用戶點擊Submit按鈕，表單開始提...

kun_jian 2019-08-20 16:45 評論0 收藏0
js溫故而知新8(瀏覽器)——學習廖雪峰的js教程

摘要：對象不但充當全局作用域，而且表示瀏覽器窗口。對象有和屬性，可以獲取瀏覽器窗口的內部寬度和高度。對象表示當前頁面的信息。由于在瀏覽器中以形式表示為樹形結構，對象就是整個樹的根節點。這個行為由瀏覽器實現，主流瀏覽器均支持選項，從開始支持。瀏覽器目前主流的瀏覽器： IE 6~11：從IE10開始支持ES6標準； Chrome：基于Webkit內核，內置了非常強悍的JavaScript引...

charles_paul 2019-08-20 15:07 評論0 收藏0
js溫故而知新3——學習廖雪峰的js教程

摘要：例如，在一個中，刪掉偶數，只保留奇數，可以這么寫把一個中的空字符串刪掉，可以這么寫注意以下的版本沒有方法可見用這個高階函數，關鍵在于正確實現一個篩選函數。回調函數接收的回調函數，其實可以有多個參數。 1.map 由于map()方法定義在JavaScript的Array中，我們調用Array的map()方法，傳入我們自己的函數，就得到了一個新的Array作為結果： function po...

zhaot 2019-08-21 11:34 評論0 收藏0
js溫故而知新2——學習廖雪峰的js教程

摘要：讓我們拆開寫小明正常結果單獨調用函數怎么返回了請注意，我們已經進入到了的一個大坑里。如果單獨調用函數，比如，此時，該函數的指向全局對象，也就是。函數 1. arguments JavaScript還有一個免費贈送的關鍵字arguments，它只在函數內部起作用，并且永遠指向當前函數的調用者傳入的所有參數。arguments類似Array但它不是一個Array： function fo...

Caizhenhao 2019-08-21 11:34 評論0 收藏0
js溫故而知新9(操作DOM)——學習廖雪峰的js教程

摘要：根節點已經自動綁定為全局變量。如果寫入的字符串是通過網絡拿到了，要注意對字符編碼來避免攻擊。修改也是經常需要的操作。當你遍歷一個父節點的子節點并進行刪除操作時，要注意，屬性是一個只讀屬性，并且它在子節點變化時會實時更新。 1.操作DOM 操作一個DOM節點實際上就是這么幾個操作：更新、遍歷、添加、刪除。由于ID在HTML文檔中是唯一的，所以document.getElementByI...

Alfred 2019-08-20 15:08 評論0 收藏0