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;
```
或
```
```
';