[TOC] ## FormData 對象 `var formData = new FormData(); ` ### 方法 * `FormData.get(key)`：獲取指定鍵名對應的鍵值，參數為鍵名。如果有多個同名的鍵值對，則返回第一個鍵值對的鍵值。 * `FormData.getAll(key)`：返回一個數組，表示指定鍵名對應的所有鍵值。如果有多個同名的鍵值對，數組會包含所有的鍵值。 * `FormData.set(key, value)`：設置指定鍵名的鍵值，參數為鍵名。如果鍵名不存在，會添加這個鍵值對，否則會更新指定鍵名的鍵值。如果第二個參數是文件，還可以使用第三個參數，表示文件名。 * `FormData.delete(key)`：刪除一個鍵值對，參數為鍵名。 * `FormData.append(key, value)`：添加一個鍵值對。如果鍵名重復，則會生成兩個相同鍵名的鍵值對。如果第二個參數是文件，還可以使用第三個參數，表示文件名。 * `FormData.has(key)`：返回一個布爾值，表示是否具有該鍵名的鍵值對。 * `FormData.keys()`：返回一個遍歷器對象，用于`for...of`循環遍歷所有的鍵名。 * `FormData.values()`：返回一個遍歷器對象，用于`for...of`循環遍歷所有的鍵值。 * `FormData.entries()`：返回一個遍歷器對象，用于`for...of`循環遍歷所有的鍵值對。如果直接用`for...of`循環遍歷 FormData 實例，默認就會調用這個方法。 ### get()、getAll()、set()、append() ``` var formData = new FormData(); formData.set('username', '張三'); formData.append('username', '李四'); formData.get('username') // "張三" formData.getAll('username') // ["張三", "李四"] formData.append('userpic[]', myFileInput.files[0], 'user1.jpg'); formData.append('userpic[]', myFileInput.files[1], 'user2.jpg'); ``` ### 對現有表單處理 ``` var myForm = document.getElementById('myForm'); var formData = new FormData(myForm); // 獲取某個控件的值 formData.get('username') // "" // 設置某個控件的值 formData.set('username', '張三'); formData.get('username') // "張三" ``` ## 自動校驗 自帶驗證 ``` <!-- 必填 --> <input required> <!-- 必須符合正則表達式 --> <input pattern="banana|cherry"> <!-- 字符串長度必須為6個字符 --> <input minlength="6" maxlength="6"> <!-- 數值必須在1到10之間 --> <input type="number" min="1" max="10"> <!-- 必須填入 Email 地址 --> <input type="email"> <!-- 必須填入 URL --> <input type="URL"> ``` ### checkValidity() ``` // 觸發整個表單的校驗 form.checkValidity() // 觸發單個表單控件的校驗 formControl.checkValidity() ``` ``` function submitForm(action) { var form = document.getElementById('form'); form.action = action; if (form.checkValidity()) { form.submit(); } } ``` ### willValidate 判斷是否在提交驗證 返回布爾 ``` // <form novalidate> // <input id="name" name="name" required /> // </form> var input = document.querySelector('#name'); input.willValidate // true ``` ### validationMessage 返回驗證參數 //設置提示的位置 ``` var myInput = document.getElementById('myinput'); if (!myInput.checkValidity()) { document.getElementById('prompt').innerHTML = myInput.validationMessage; } ``` ### setCustomValidity ``` document.querySelector('input[type=text]').addEventListener('change',function () { var vali = parseInt(this.getAttribute('vlength')); var value = this.value; if (value.length<vali){ this.setCustomValidity('長度不符合要求,'); return false; } this.setCustomValidity('');//只有清空才會提交 }) ``` ### novalidate 取消取消驗證 ``` <form novalidate> </form> ``` 或 ``` form.noValidate = true; ``` 或 ``` <form> <input type="submit" value="submit" formnovalidate> </form> ```