操作表單 · 廖雪峰 JavaScript Python Git 教程

# 操作表單用JavaScript操作表單和操作DOM是類似的，因為表單本身也是DOM樹。不過表單的輸入框、下拉框等可以接收用戶輸入，所以用JavaScript來操作表單，可以獲得用戶輸入的內容，或者對一個輸入框設置新的內容。 HTML表單的輸入控件主要有以下幾種： * 文本框，對應的`<input type="text">`，用于輸入文本； * 口令框，對應的`<input type="password">`，用于輸入口令； * 單選框，對應的`<input type="radio">`，用于選擇一項； * 復選框，對應的`<input type="checkbox">`，用于選擇多項； * 下拉框，對應的`<select>`，用于選擇一項； * 隱藏文本，對應的`<input type="hidden">`，用戶不可見，但表單提交時會把隱藏文本發送到服務器。 ## 獲取值如果我們獲得了一個`<input>`節點的引用，就可以直接調用`value`獲得對應的用戶輸入值： ``` // <input type="text" id="email"> var input = document.getElementById('email'); input.value; // '用戶輸入的值' ``` 這種方式可以應用于`text`、`password`、`hidden`以及`select`。但是，對于單選框和復選框，`value`屬性返回的永遠是HTML預設的值，而我們需要獲得的實際是用戶是否“勾上了”選項，所以應該用`checked`判斷： ``` // <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label> // <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label> 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`就可以： ``` // <input type="text" id="email"> var input = document.getElementById('email'); input.value = 'test@example.com'; // 文本框的內容已更新 ``` 對于單選框和復選框，設置`checked`為`true`或`false`即可。 ## HTML5控件 HTML5新增了大量標準控件，常用的包括`date`、`datetime`、`datetime-local`、`color`等，它們都使用`<input>`標簽： ``` <input type="date" value="2015-07-01"> ``` ``` <input type="datetime-local" value="2015-07-01T02:03:04"> ``` ``` <input type="color" value="#ff0000"> ``` 不支持HTML5的瀏覽器無法識別新的控件，會把它們當做`type="text"`來顯示。支持HTML5的瀏覽器將獲得格式化的字符串。例如，`type="date"`類型的`input`的`value`將保證是一個有效的`YYYY-MM-DD`格式的日期，或者空字符串。 ## 提交表單最后，JavaScript可以以兩種方式來處理表單的提交（AJAX方式在后面章節介紹）。方式一是通過`<form>`元素的`submit()`方法提交一個表單，例如，響應一個`<button>`的`click`事件，在JavaScript代碼中提交表單： ```  <form id="test-form"> <input type="text" name="test"> <button type="button" onclick="doSubmitForm()">Submit</button> </form> <script> function doSubmitForm() { var form = document.getElementById('test-form'); // 可以在此修改form的input... // 提交form: form.submit(); } </script> ``` 這種方式的缺點是擾亂了瀏覽器對form的正常提交。瀏覽器默認點擊`<button type="submit">`時提交表單，或者用戶在最后一個輸入框按回車鍵。因此，第二種方式是響應`<form>`本身的`onsubmit`事件，在提交form時作修改： ```  <form id="test-form" onsubmit="return checkForm()"> <input type="text" name="test"> <button type="submit">Submit</button> </form> <script> function checkForm() { var form = document.getElementById('test-form'); // 可以在此修改form的input... // 繼續下一步: return true; } </script> ``` 注意要`return true`來告訴瀏覽器繼續提交，如果`return false`，瀏覽器將不會繼續提交form，這種情況通常對應用戶輸入有誤，提示用戶錯誤信息后終止提交form。在檢查和修改`<input>`時，要充分利用`<input type="hidden">`來傳遞數據。例如，很多登錄表單希望用戶輸入用戶名和口令，但是，安全考慮，提交表單時不傳輸明文口令，而是口令的MD5。普通JavaScript開發人員會直接修改`<input>`： ```  <form id="login-form" method="post" onsubmit="return checkForm()"> <input type="text" id="username" name="username"> <input type="password" id="password" name="password"> <button type="submit">Submit</button> </form> <script> function checkForm() { var pwd = document.getElementById('password'); // 把用戶輸入的明文變為MD5: pwd.value = toMD5(pwd.value); // 繼續下一步: return true; } </script> ``` 這個做法看上去沒啥問題，但用戶輸入了口令提交時，口令框的顯示會突然從幾個`*`變成32個`*`（因為MD5有32個字符）。要想不改變用戶的輸入，可以利用`<input type="hidden">`實現： ```  <form id="login-form" method="post" onsubmit="return checkForm()"> <input type="text" id="username" name="username"> <input type="password" id="input-password"> <input type="hidden" id="md5-password" name="password"> <button type="submit">Submit</button> </form> <script> function checkForm() { var input_pwd = document.getElementById('input-password'); var md5_pwd = document.getElementById('md5-password'); // 把用戶輸入的明文變為MD5: md5_pwd.value = toMD5(input_pwd.value); // 繼續下一步: return true; } </script> ``` 注意到`id`為`md5-password`的`<input>`標記了`name="password"`，而用戶輸入的`id`為`input-password`的`<input>`沒有`name`屬性。沒有`name`屬性的`<input>`的數據不會被提交。 ## 練習利用JavaScript檢查用戶注冊信息是否正確，在以下情況不滿足時報錯并阻止提交表單： * 用戶名必須是3-10位英文字母或數字； * 口令必須是6-20位； * 兩次輸入口令必須一致。 ```  <form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()"> <p id="test-error" style="color:red"></p> <p> 用戶名: <input type="text" id="username" name="username"> </p> <p> 口令: <input type="password" id="password" name="password"> </p> <p> 重復口令: <input type="password" id="password-2"> </p> <p> <button type="submit">提交</button> <button type="reset">重置</button> </p> </form> ``` ``` 'use strict'; var checkRegisterForm = function () { // TODO: return false; } // 測試: ;(function () { window.testFormHandler = checkRegisterForm; var form = document.getElementById('test-register'); if (form.dispatchEvent) { var event = new Event('submit', { bubbles: true, cancelable: true }); form.dispatchEvent(event); } else { form.fireEvent('onsubmit'); } })(); ```