[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> ```