10-3-表单
第十章 BOM¶
统计信息：字数 11126 阅读23分钟
2021-11-24 2023-04-11
10.13 表单/FormData¶
表单 form¶
<form action='/handling-page' method='post' id="myform">
<div>
<label for="name"></label>
<input type="text" id="name" name="user_name"/>
</div>
<input type="submit" id="submit" name="submit_button" value="submit"/>
</form>
当点击提交时，内部的表单会以键值对（name=value）的形式提交到服务器；如果是GET的请求方法，就在URL中以查询字符串的形式（?name=Michael&password=test），请求头就是这样的。如果是POST请求，就会将这部分参数转化成Formdata进行传递。
Form Data 对象¶
可以手动构造 Form data对象并发送请求
let form = document.getElementById('myForm');
let formData = new FormData(form);
实例方法
formData.get('user_name') //
formData.getAll();
formData.set('password', '123456');
formData.append('key1', 'value1');
formData.delete('key');
formData.has(key)
formData.keys()
formData.values()
formData.entries()
表单的内置验证¶
自动校验¶
表单提交的时候，浏览器允许开发者指定一些条件，它会自动验证各个表单控件的值是否符合条件。
<!-- 必填 -->
<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">
如果一个控件通过验证，它就会匹配:valid的 CSS 伪类，浏览器会继续进行表单提交的流程。如果没有通过验证，该控件就会匹配:invalid的 CSS 伪类，浏览器会终止表单提交，并显示一个错误信息。
checkValidity()¶
手动触发表单的校验。表单元素和表单控件都有checkValidity()方法，用于手动触发校验。
// 触发整个表单的校验
form.checkValidity()
// 触发单个表单控件的校验
formControl.checkValidity()
checkValidity()方法返回一个布尔值，true表示通过校验，false表示没有通过校验。因此，提交表单可以封装为下面的函数。
function submitForm(action) {
var form = document.getElementById('form');
form.action = action;
if (form.checkValidity()) {
form.submit();
}
}
willValidate 属性¶
控件元素的willValidate属性是一个布尔值，表示该控件是否会在提交时进行校验。
// HTML 代码如下
// <form novalidate>
// <input id="name" name="name" required />
// </form>
var input = document.querySelector('#name');
input.willValidate // true
validationMessage 属性¶
控件元素的validationMessage属性返回一个字符串，表示控件不满足校验条件时，浏览器显示的提示文本。以下两种情况，该属性返回空字符串。
- 该控件不会在提交时自动校验
- 该控件满足校验条件
// HTML 代码如下
// <form><input type="text" required></form>
document.querySelector('form input').validationMessage
// "请填写此字段。"
下面是另一个例子。
var myInput = document.getElementById('myinput');
if (!myInput.checkValidity()) {
document.getElementById('prompt').innerHTML = myInput.validationMessage;
}
setCustomValidity()¶
控件元素的setCustomValidity()方法用来定制校验失败时的报错信息。它接受一个字符串作为参数，该字符串就是定制的报错信息。如果参数为空字符串，则上次设置的报错信息被清除。
如果调用这个方法，并且参数不为空字符串，浏览器就会认为控件没有通过校验，就会立刻显示该方法设置的报错信息。
/* HTML 代码如下
<form>
<p><input type="file" id="fs"></p>
<p><input type="submit"></p>
</form>
*/
document.getElementById('fs').onchange = checkFileSize;
function checkFileSize() {
var fs = document.getElementById('fs');
var files = fs.files;
if (files.length > 0) {
if (files[0].size > 75 * 1024) {
fs.setCustomValidity('文件不能大于 75KB');
return;
}
}
fs.setCustomValidity('');
}
上面代码一旦发现文件大于 75KB，就会设置校验失败，同时给出自定义的报错信息。然后，点击提交按钮时，就会显示报错信息。这种校验失败是不会自动消除的，所以如果所有文件都符合条件，要将报错信息设为空字符串，手动消除校验失败的状态。
validity 属性¶
控件元素的属性validity属性返回一个ValidityState对象，包含当前校验状态的信息。
该对象有以下属性，全部为只读属性。
ValidityState.badInput：布尔值，表示浏览器是否不能将用户的输入转换成正确的类型，比如用户在数值框里面输入字符串。ValidityState.customError：布尔值，表示是否已经调用setCustomValidity()方法，将校验信息设置为一个非空字符串。ValidityState.patternMismatch：布尔值，表示用户输入的值是否不满足模式的要求。ValidityState.rangeOverflow：布尔值，表示用户输入的值是否大于最大范围。ValidityState.rangeUnderflow：布尔值，表示用户输入的值是否小于最小范围。ValidityState.stepMismatch：布尔值，表示用户输入的值不符合步长的设置（即不能被步长值整除）。ValidityState.tooLong：布尔值，表示用户输入的字数超出了最长字数。ValidityState.tooShort：布尔值，表示用户输入的字符少于最短字数。ValidityState.typeMismatch：布尔值，表示用户填入的值不符合类型要求（主要是类型为 Email 或 URL 的情况）。ValidityState.valid：布尔值，表示用户是否满足所有校验条件。ValidityState.valueMissing：布尔值，表示用户没有填入必填的值。
下面是一个例子。
var input = document.getElementById('myinput');
if (input.validity.valid) {
console.log('通过校验');
} else {
console.log('校验失败');
}
下面是另外一个例子。
var txt = '';
if (document.getElementById('myInput').validity.rangeOverflow) {
txt = '数值超过上限';
}
document.getElementById('prompt').innerHTML = txt;
表单的 novalidate 属性¶
表单元素的 HTML 属性novalidate，可以关闭浏览器的自动校验。
<form novalidate></form>
这个属性也可以在脚本里设置。
form.noValidate = true;
如果表单元素没有设置novalidate属性，那么提交按钮（<button>或<input>元素）的formnovalidate属性也有同样的作用。
<form>
<input type="submit" value="submit" formnovalidate>
</form>
enctype 属性¶
表单能够用四种编码，向服务器发送数据。编码格式由表单的enctype属性决定。
假定表单有两个字段，分别是foo和baz，其中foo字段的值等于bar，baz字段的值是一个分为两行的字符串。
The first line.
The second line.
下面四种格式，都可以将这个表单发送到服务器。
（1）GET 方法
如果表单使用GET方法发送数据，enctype属性无效。
<form
action="register.php"
method="get"
onsubmit="AJAXSubmit(this); return false;"
>
</form>
数据将以 URL 的查询字符串发出。
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
（2）application/x-www-form-urlencoded
如果表单用POST方法发送数据，并省略enctype属性，那么数据以application/x-www-form-urlencoded格式发送（因为这是默认值）。
<form
action="register.php"
method="post"
onsubmit="AJAXSubmit(this); return false;"
>
</form>
发送的 HTTP 请求如下。
Content-Type: application/x-www-form-urlencoded
foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A
上面代码中，数据体里面的%0D%0A代表换行符（\r\n）。
（3）text/plain
如果表单使用POST方法发送数据，enctype属性为text/plain，那么数据将以纯文本格式发送。
<form
action="register.php"
method="post"
enctype="text/plain"
onsubmit="AJAXSubmit(this); return false;"
>
</form>
发送的 HTTP 请求如下。
Content-Type: text/plain
foo=bar
baz=The first line.
The second line.
（4）multipart/form-data
如果表单使用POST方法，enctype属性为multipart/form-data，那么数据将以混合的格式发送。
<form
action="register.php"
method="post"
enctype="multipart/form-data"
onsubmit="AJAXSubmit(this); return false;"
>
</form>
发送的 HTTP 请求如下。
Content-Type: multipart/form-data; boundary=
Content-Disposition: form-data; name="foo"
bar
Content-Disposition: form-data; name="baz"
The first line.
The second line.
这种格式也是文件上传的格式。
文件上传¶
用户上传文件，也是通过表单。具体来说，就是通过文件输入框选择本地文件，提交表单的时候，浏览器就会把这个文件发送到服务器。
<input type="file" id="file" name="myFile">
此外，还需要将表单<form>元素的method属性设为POST，enctype属性设为multipart/form-data。其中，enctype属性决定了 HTTP 头信息的Content-Type字段的值，默认情况下这个字段的值是application/x-www-form-urlencoded，但是文件上传的时候要改成multipart/form-data。
<form method="post" enctype="multipart/form-data">
<div>
<label for="file">选择一个文件</label>
<input type="file" id="file" name="myFile" multiple>
</div>
<div>
<input type="submit" id="submit" name="submit_button" value="上传" />
</div>
</form>
上面的 HTML 代码中，file 控件的multiple属性，指定可以一次选择多个文件；如果没有这个属性，则一次只能选择一个文件。
var files = document.getElementById('file').files;
然后，新建一个 FormData 实例对象，模拟发送到服务器的表单数据，把选中的文件添加到这个对象上面。
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
var file = files[i];
// 只上传图片文件
if (!file.type.match('image.*')) {
continue;
}
formData.append('photos[]', file, file.name);
}
最后，使用 Ajax 向服务器上传文件。
var xhr = new XMLHttpRequest();
xhr.open('POST', 'handler.php', true);
xhr.onload = function () {
if (xhr.status !== 200) {
console.log('An error occurred!');
}
};
xhr.send(formData);
除了发送 FormData 实例，也可以直接 AJAX 发送文件。
var file = document.getElementById('test-input').files[0];
var xhr = new XMLHttpRequest();
xhr.open('POST', 'myserver/uploads');
xhr.setRequestHeader('Content-Type', file.type);
xhr.send(file);