表單概述

表單（<form>）用來(lái)收集用戶提交的數(shù)據(jù)姨谷，發(fā)送到服務(wù)器逗宁。比如，用戶提交用戶名和密碼梦湘，讓服務(wù)器驗(yàn)證瞎颗，就要通過(guò)表單。

<form action="/handling-page" method="post">
  <div>
    <label for="name">用戶名：</label>
    <input type="text" id="name" name="user_name" />
  </div>
  <div>
    <label for="passwd">密碼：</label>
    <input type="password" id="passwd" name="user_passwd" />
  </div>
  <div>
    <input type="submit" id="submit" name="submit_button" value="提交" />
  </div>
</form>

上面代碼就是一個(gè)簡(jiǎn)單的表單捌议，包含三個(gè)控件：用戶名輸入框哼拔、密碼輸入框和提交按鈕。

用戶點(diǎn)擊“提交”按鈕瓣颅，每一個(gè)控件都會(huì)生成一個(gè)鍵值對(duì)倦逐，鍵名是控件的name屬性，鍵值是控件的value屬性宫补，鍵名和鍵值之間由等號(hào)連接檬姥。比如曾我，用戶名輸入框的name屬性是user_name，value屬性是用戶輸入的值健民，假定是“張三”抒巢，提交到服務(wù)器的時(shí)候，就會(huì)生成一個(gè)鍵值對(duì)user_name=張三秉犹。

所有的鍵值對(duì)都會(huì)提交到服務(wù)器虐秦。但是，提交的數(shù)據(jù)格式跟<form>元素的method屬性有關(guān)凤优。該屬性指定了提交數(shù)據(jù)的 HTTP 方法。如果是 GET 方法蜈彼，所有鍵值對(duì)會(huì)以 URL 的查詢字符串形式筑辨，提交到服務(wù)器，比如/handling-page?user_name=張三&user_passwd=123&submit_button=提交幸逆。下面就是 GET 請(qǐng)求的 HTTP 頭信息棍辕。

GET /handling-page?user_name=張三&user_passwd=123&submit_button=提交
Host: example.com

如果是 POST 方法，所有鍵值對(duì)會(huì)連接成一行还绘，作為 HTTP 請(qǐng)求的數(shù)據(jù)體發(fā)送到服務(wù)器楚昭，比如user_name=張三&user_passwd=123&submit_button=提交。下面就是 POST 請(qǐng)求的頭信息拍顷。

POST /handling-page HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 74

user_name=張三&user_passwd=123&submit_button=提交

注意抚太，實(shí)際提交的時(shí)候，只要鍵值不是 URL 的合法字符（比如漢字“張三”和“確定”）昔案，瀏覽器會(huì)自動(dòng)對(duì)其進(jìn)行編碼尿贫。

點(diǎn)擊submit控件，就可以提交表單踏揣。

<form>
  <input type="submit" value="提交">
</form>

上面表單就包含一個(gè)submit控件庆亡，點(diǎn)擊這個(gè)控件，瀏覽器就會(huì)把表單數(shù)據(jù)向服務(wù)器提交捞稿。

注意又谋，表單里面的<button>元素如果沒(méi)有用type屬性指定類型，那么默認(rèn)就是submit控件娱局。

<form>
  <button>提交</button>
</form>

上面表單的<button>元素彰亥，點(diǎn)擊以后也會(huì)提交表單。

除了點(diǎn)擊submit控件提交表單铃辖，還可以用表單元素的submit()方法剩愧，通過(guò)腳本提交表單。

formElement.submit();

表單元素的reset()方法可以重置所有控件的值（重置為默認(rèn)值）娇斩。

formElement.reset()

FormData 對(duì)象

概述

表單數(shù)據(jù)以鍵值對(duì)的形式向服務(wù)器發(fā)送仁卷，這個(gè)過(guò)程是瀏覽器自動(dòng)完成的穴翩。但是有時(shí)候，我們希望通過(guò)腳本完成過(guò)程锦积，構(gòu)造和編輯表單鍵值對(duì)芒帕，然后通過(guò)XMLHttpRequest.send()方法發(fā)送。瀏覽器原生提供了 FormData 對(duì)象來(lái)完成這項(xiàng)工作丰介。

FormData 首先是一個(gè)構(gòu)造函數(shù)背蟆，用來(lái)生成實(shí)例。

var formdata = new FormData(form);

FormData()構(gòu)造函數(shù)的參數(shù)是一個(gè)表單元素哮幢，這個(gè)參數(shù)是可選的带膀。如果省略參數(shù)，就表示一個(gè)空的表單橙垢，否則就會(huì)處理表單元素里面的鍵值對(duì)垛叨。

下面是一個(gè)表單。

<form id="myForm" name="myForm">
  <div>
    <label for="username">用戶名：</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="useracc">賬號(hào)：</label>
    <input type="text" id="useracc" name="useracc">
  </div>
  <div>
    <label for="userfile">上傳文件：</label>
    <input type="file" id="userfile" name="userfile">
  </div>
<input type="submit" value="Submit!">
</form>

我們用 FormData 對(duì)象處理上面這個(gè)表單柜某。

var myForm = document.getElementById('myForm');
var formData = new FormData(myForm);

// 獲取某個(gè)控件的值
formData.get('username') // ""

// 設(shè)置某個(gè)控件的值
formData.set('username', '張三');

formData.get('username') // "張三"

實(shí)例方法

FormData 提供以下實(shí)例方法嗽元。

• FormData.get(key)：獲取指定鍵名對(duì)應(yīng)的鍵值，參數(shù)為鍵名喂击。如果有多個(gè)同名的鍵值對(duì)剂癌，則返回第一個(gè)鍵值對(duì)的鍵值。
• FormData.getAll(key)：返回一個(gè)數(shù)組翰绊，表示指定鍵名對(duì)應(yīng)的所有鍵值佩谷。如果有多個(gè)同名的鍵值對(duì)，數(shù)組會(huì)包含所有的鍵值辞做。
• FormData.set(key, value)：設(shè)置指定鍵名的鍵值琳要，參數(shù)為鍵名。如果鍵名不存在秤茅，會(huì)添加這個(gè)鍵值對(duì)稚补，否則會(huì)更新指定鍵名的鍵值。如果第二個(gè)參數(shù)是文件框喳，還可以使用第三個(gè)參數(shù)课幕，表示文件名。
• FormData.delete(key)：刪除一個(gè)鍵值對(duì)五垮，參數(shù)為鍵名乍惊。
• FormData.append(key, value)：添加一個(gè)鍵值對(duì)。如果鍵名重復(fù)放仗，則會(huì)生成兩個(gè)相同鍵名的鍵值對(duì)润绎。如果第二個(gè)參數(shù)是文件，還可以使用第三個(gè)參數(shù)，表示文件名莉撇。
• FormData.has(key)：返回一個(gè)布爾值呢蛤，表示是否具有該鍵名的鍵值對(duì)。
• FormData.keys()：返回一個(gè)遍歷器對(duì)象棍郎，用于for...of循環(huán)遍歷所有的鍵名其障。
• FormData.values()：返回一個(gè)遍歷器對(duì)象，用于for...of循環(huán)遍歷所有的鍵值涂佃。
• FormData.entries()：返回一個(gè)遍歷器對(duì)象励翼，用于for...of循環(huán)遍歷所有的鍵值對(duì)。如果直接用for...of循環(huán)遍歷 FormData 實(shí)例辜荠，默認(rèn)就會(huì)調(diào)用這個(gè)方法汽抚。

下面是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 formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

for (var key of formData.keys()) {
  console.log(key);
}
// "key1"
// "key2"

for (var value of formData.values()) {
  console.log(value);
}
// "value1"
// "value2"

for (var pair of formData.entries()) {
  console.log(pair[0] + ': ' + pair[1]);
}
// key1: value1
// key2: value2

// 等同于遍歷 formData.entries()
for (var pair of formData) {
  console.log(pair[0] + ': ' + pair[1]);
}
// key1: value1
// key2: value2

表單的內(nèi)置驗(yàn)證

自動(dòng)校驗(yàn)

表單提交的時(shí)候，瀏覽器允許開(kāi)發(fā)者指定一些條件叠纹，它會(huì)自動(dòng)驗(yàn)證各個(gè)表單控件的值是否符合條件季研。

<!-- 必填 -->
<input required>

<!-- 必須符合正則表達(dá)式 -->
<input pattern="banana|cherry">

<!-- 字符串長(zhǎng)度必須為6個(gè)字符 -->
<input minlength="6" maxlength="6">

<!-- 數(shù)值必須在1到10之間 -->
<input type="number" min="1" max="10">

<!-- 必須填入 Email 地址 -->
<input type="email">

<!-- 必須填入 URL -->
<input type="URL">

如果一個(gè)控件通過(guò)驗(yàn)證，它就會(huì)匹配:valid的 CSS 偽類誉察，瀏覽器會(huì)繼續(xù)進(jìn)行表單提交的流程与涡。如果沒(méi)有通過(guò)驗(yàn)證，該控件就會(huì)匹配:invalid的 CSS 偽類持偏，瀏覽器會(huì)終止表單提交驼卖，并顯示一個(gè)錯(cuò)誤信息。

checkValidity()

除了提交表單的時(shí)候鸿秆，瀏覽器自動(dòng)校驗(yàn)表單酌畜，還可以手動(dòng)觸發(fā)表單的校驗(yàn)。表單元素和表單控件都有checkValidity()方法卿叽，用于手動(dòng)觸發(fā)校驗(yàn)桥胞。

// 觸發(fā)整個(gè)表單的校驗(yàn)
form.checkValidity()

// 觸發(fā)單個(gè)表單控件的校驗(yàn)
formControl.checkValidity()

checkValidity()方法返回一個(gè)布爾值，true表示通過(guò)校驗(yàn)考婴，false表示沒(méi)有通過(guò)校驗(yàn)贩虾。因此，提交表單可以封裝為下面的函數(shù)沥阱。

function submitForm(action) {
  var form = document.getElementById('form');
  form.action = action;
  if (form.checkValidity()) {
    form.submit();
  }
}

willValidate 屬性

控件元素的willValidate屬性是一個(gè)布爾值缎罢，表示該控件是否會(huì)在提交時(shí)進(jìn)行校驗(yàn)。

// HTML 代碼如下
// <form novalidate>
//   <input id="name" name="name" required />
// </form>

var input = document.querySelector('#name');
input.willValidate // true

validationMessage 屬性

控件元素的validationMessage屬性返回一個(gè)字符串，表示控件不滿足校驗(yàn)條件時(shí)策精，瀏覽器顯示的提示文本舰始。以下兩種情況，該屬性返回空字符串蛮寂。

• 該控件不會(huì)在提交時(shí)自動(dòng)校驗(yàn)
• 該控件滿足校驗(yàn)條件

// HTML 代碼如下
// <form><input type="text" required></form>
document.querySelector('form input').validationMessage
// "請(qǐng)?zhí)顚懘俗侄巍?

下面是另一個(gè)例子蔽午。

var myInput = document.getElementById('myinput');
if (!myInput.checkValidity()) {
  document.getElementById('prompt').innerHTML = myInput.validationMessage;
}

setCustomValidity()

控件元素的setCustomValidity()方法用來(lái)定制校驗(yàn)失敗時(shí)的報(bào)錯(cuò)信息。它接受一個(gè)字符串作為參數(shù)酬蹋，該字符串就是定制的報(bào)錯(cuò)信息及老。如果參數(shù)為空字符串，則上次設(shè)置的報(bào)錯(cuò)信息被清除范抓。

如果調(diào)用這個(gè)方法骄恶，并且參數(shù)不為空字符串，瀏覽器就會(huì)認(rèn)為控件沒(méi)有通過(guò)校驗(yàn)匕垫，就會(huì)立刻顯示該方法設(shè)置的報(bào)錯(cuò)信息僧鲁。

/* 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('');
}

上面代碼一旦發(fā)現(xiàn)文件大于 75KB，就會(huì)設(shè)置校驗(yàn)失敗象泵，同時(shí)給出自定義的報(bào)錯(cuò)信息寞秃。然后，點(diǎn)擊提交按鈕時(shí)偶惠，就會(huì)顯示報(bào)錯(cuò)信息春寿。這種校驗(yàn)失敗是不會(huì)自動(dòng)消除的，所以如果所有文件都符合條件忽孽，要將報(bào)錯(cuò)信息設(shè)為空字符串绑改，手動(dòng)消除校驗(yàn)失敗的狀態(tài)。

validity 屬性

控件元素的屬性validity屬性返回一個(gè)ValidityState對(duì)象兄一，包含當(dāng)前校驗(yàn)狀態(tài)的信息厘线。

該對(duì)象有以下屬性，全部為只讀屬性出革。

• ValidityState.badInput：布爾值造壮，表示瀏覽器是否不能將用戶的輸入轉(zhuǎn)換成正確的類型，比如用戶在數(shù)值框里面輸入字符串骂束。
• ValidityState.customError：布爾值费薄，表示是否已經(jīng)調(diào)用setCustomValidity()方法，將校驗(yàn)信息設(shè)置為一個(gè)非空字符串栖雾。
• ValidityState.patternMismatch：布爾值楞抡，表示用戶輸入的值是否不滿足模式的要求。
• ValidityState.rangeOverflow：布爾值析藕，表示用戶輸入的值是否大于最大范圍召廷。
• ValidityState.rangeUnderflow：布爾值，表示用戶輸入的值是否小于最小范圍。
• ValidityState.stepMismatch：布爾值竞慢，表示用戶輸入的值不符合步長(zhǎng)的設(shè)置（即不能被步長(zhǎng)值整除）先紫。
• ValidityState.tooLong：布爾值，表示用戶輸入的字?jǐn)?shù)超出了最長(zhǎng)字?jǐn)?shù)筹煮。
• ValidityState.tooShort：布爾值遮精，表示用戶輸入的字符少于最短字?jǐn)?shù)。
• ValidityState.typeMismatch：布爾值败潦，表示用戶填入的值不符合類型要求（主要是類型為 Email 或 URL 的情況）本冲。
• ValidityState.valid：布爾值，表示用戶是否滿足所有校驗(yàn)條件劫扒。
• ValidityState.valueMissing：布爾值檬洞，表示用戶沒(méi)有填入必填的值。

下面是一個(gè)例子沟饥。

var input = document.getElementById('myinput');
if (input.validity.valid) {
  console.log('通過(guò)校驗(yàn)');
} else {
  console.log('校驗(yàn)失敗');
}

下面是另外一個(gè)例子添怔。

var txt = '';
if (document.getElementById('myInput').validity.rangeOverflow) {
  txt = '數(shù)值超過(guò)上限';
}
document.getElementById('prompt').innerHTML = txt;

表單的 novalidate 屬性

表單元素的 HTML 屬性novalidate，可以關(guān)閉瀏覽器的自動(dòng)校驗(yàn)贤旷。

<form novalidate>
</form>

這個(gè)屬性也可以在腳本里設(shè)置广料。

form.noValidate = true;

如果表單元素沒(méi)有設(shè)置novalidate屬性，那么提交按鈕（<button>或<input>元素）的formnovalidate屬性也有同樣的作用幼驶。

<form>
  <input type="submit" value="submit" formnovalidate>
</form>

enctype 屬性

表單能夠用四種編碼性昭，向服務(wù)器發(fā)送數(shù)據(jù)。編碼格式由表單的enctype屬性決定县遣。

假定表單有兩個(gè)字段，分別是foo和baz汹族，其中foo字段的值等于bar萧求，baz字段的值是一個(gè)分為兩行的字符串。

The first line.
The second line.

下面四種格式顶瞒，都可以將這個(gè)表單發(fā)送到服務(wù)器夸政。

GET 方法

如果表單使用GET方法發(fā)送數(shù)據(jù)，enctype屬性無(wú)效榴徐。

<form
  action="register.php"
  method="get"
  onsubmit="AJAXSubmit(this); return false;"
>
</form>

數(shù)據(jù)將以 URL 的查詢字符串發(fā)出守问。

?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.

application/x-www-form-urlencoded

如果表單用POST方法發(fā)送數(shù)據(jù)，并省略enctype屬性坑资，那么數(shù)據(jù)以application/x-www-form-urlencoded格式發(fā)送（因?yàn)檫@是默認(rèn)值）耗帕。

<form
  action="register.php"
  method="post"
  onsubmit="AJAXSubmit(this); return false;"
>
</form>

發(fā)送的 HTTP 請(qǐng)求如下。

Content-Type: application/x-www-form-urlencoded

foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A

上面代碼中袱贮，數(shù)據(jù)體里面的%0D%0A代表?yè)Q行符（\r\n）仿便。

text/plain

如果表單使用POST方法發(fā)送數(shù)據(jù)，enctype屬性為text/plain，那么數(shù)據(jù)將以純文本格式發(fā)送嗽仪。

<form
  action="register.php"
  method="post"
  enctype="text/plain"
  onsubmit="AJAXSubmit(this); return false;"
>
</form>

發(fā)送的 HTTP 請(qǐng)求如下荒勇。

Content-Type: text/plain

foo=bar
baz=The first line.
The second line.

multipart/form-data

如果表單使用POST方法，enctype屬性為multipart/form-data闻坚，那么數(shù)據(jù)將以混合的格式發(fā)送沽翔。

<form
  action="register.php"
  method="post"
  enctype="multipart/form-data"
  onsubmit="AJAXSubmit(this); return false;"
>
</form>

發(fā)送的 HTTP 請(qǐng)求如下。

Content-Type: multipart/form-data; boundary=---------------------------314911788813839

-----------------------------314911788813839
Content-Disposition: form-data; name="foo"

bar
-----------------------------314911788813839
Content-Disposition: form-data; name="baz"

The first line.
The second line.

-----------------------------314911788813839--

這種格式也是文件上傳的格式窿凤。

文件上傳

用戶上傳文件仅偎，也是通過(guò)表單。具體來(lái)說(shuō)卷玉，就是通過(guò)文件輸入框選擇本地文件哨颂，提交表單的時(shí)候，瀏覽器就會(huì)把這個(gè)文件發(fā)送到服務(wù)器相种。

<input type="file" id="file" name="myFile">

此外威恼，還需要將表單<form>元素的method屬性設(shè)為POST，enctype屬性設(shè)為multipart/form-data寝并。其中箫措，enctype屬性決定了 HTTP 頭信息的Content-Type字段的值，默認(rèn)情況下這個(gè)字段的值是application/x-www-form-urlencoded衬潦，但是文件上傳的時(shí)候要改成multipart/form-data斤蔓。

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">選擇一個(gè)文件</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屬性镀岛，指定可以一次選擇多個(gè)文件弦牡；如果沒(méi)有這個(gè)屬性，則一次只能選擇一個(gè)文件漂羊。

var fileSelect = document.getElementById('file');
var files = fileSelect.files;

然后驾锰，新建一個(gè) FormData 實(shí)例對(duì)象，模擬發(fā)送到服務(wù)器的表單數(shù)據(jù)走越，把選中的文件添加到這個(gè)對(duì)象上面椭豫。

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 向服務(wù)器上傳文件旨指。

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);

除了發(fā)送 FormData 實(shí)例赏酥，也可以直接 AJAX 發(fā)送文件。

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);