FormData 对象

最后更新于:2022-04-02 03:25:22

[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') // "张三" ``` ## 自动校验 自带验证 ``` ``` ### checkValidity() ``` // 触发整个表单的校验 form.checkValidity() // 触发单个表单控件的校验 formControl.checkValidity() ``` ``` function submitForm(action) { var form = document.getElementById('form'); form.action = action; if (form.checkValidity()) { form.submit(); } } ``` ### willValidate 判断是否在提交验证 返回布尔 ``` //
// //
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 ``` 或 ``` form.noValidate = true; ``` 或 ```
```
';