沒錯，這篇文章的標(biāo)題是我不知道的表單登錄拦惋。為啥這么說呢憎亚，因為我上次看HTML是兩三年前的事情了员寇，那時候看表單只是單純的把表單當(dāng)成一種結(jié)構(gòu)，一個語義化的標(biāo)簽第美，而沒有詳細(xì)的去看表單究竟能做什么丁恭。這確實是一種不建議的學(xué)習(xí)方式，囫圇吞棗只求快速上手斋日，卻連棗長啥樣都不知道。說回正題墓陈，這里主要介紹一些有意思的HTML5表單行為恶守，好讓我知道，其實登錄可以寫得更優(yōu)雅點(diǎn)贡必。
接下來我會列舉表單登錄中遇到的一些有意思的事情兔港，主要包括以下幾個方面：
- 表單自動填充
- 請求參數(shù)顯示在地址欄
- 表單驗證
表單自動填充
一般來講，如果你曾今登錄過一個網(wǎng)站仔拟，并且點(diǎn)擊了記住密碼衫樊，那么當(dāng)你第二次登錄該網(wǎng)站的時候，瀏覽器會自動幫你填充表單信息利花，你只需要很方便的點(diǎn)擊「登錄」即可進(jìn)入科侈，而無需再重復(fù)輸入。瀏覽器的這種行為確實方便了不少的用戶炒事，使得登錄一步到位臀栈，但是，作為開發(fā)者而言挠乳，我們有沒有辦法去限定瀏覽器不要自動填充網(wǎng)頁表單呢权薯？答案是肯定的姑躲。
翻看MDN文檔中關(guān)于form表單這一部分，可以看到autocomplete這個字段
用于指示 input 元素是否能夠擁有一個默認(rèn)值盟蚣，這個默認(rèn)值是由瀏覽器自動補(bǔ)全的黍析。這個設(shè)定可以被屬于這個form的子元素的 autocomplete 屬性重載（覆蓋）。 可能的值有:
- off: 在每一個用到的輸入域里屎开，用戶必須顯式的輸入一個值阐枣，或者document 以它自己的方式提供自動補(bǔ)全；瀏覽器不會自動補(bǔ)全輸入牍戚。
- on: 瀏覽器能夠根據(jù)用戶之前在form里輸入的值自動補(bǔ)全侮繁。
這段話的意思很明確了，如果想禁止瀏覽器自動填充表單信息如孝，那么應(yīng)該在表單的屬性里使得autocomplete設(shè)置為off宪哩，這個屬性也可以對表單下的input使用，以做更靈活的配置第晰。需要注意的一點(diǎn)是锁孟，在chrome瀏覽器上，如果要使得所有表單都不自動填充茁瘦，那么需要顯式的設(shè)置每一項input的autocomplete="off"品抽。
請求參數(shù)顯示在地址欄？
一開始做表單登錄的時候很容易的就被我忽略了這個問題甜熔，測試成功不會出現(xiàn)圆恤，失敗了也沒有注意到地址欄的變化，直到后面需要調(diào)試POST請求的時候腔稀，才發(fā)現(xiàn)在開發(fā)者工具里無法獲取盆昙，或者說是因為失敗的時候同步刷新了整個頁面導(dǎo)致無法獲取到有效的信息。注意到這里的時候焊虏，我梳理了以下兩個問題：
- 登錄失敗會刷新整個頁面
- POST的參數(shù)同步出現(xiàn)在地址欄
第二點(diǎn)在瀏覽器中的具體表現(xiàn)為：
登陸前：http://localhost:3000
登錄失敗后：http://localhost:3000/?username=test&password=1222#/
解決方法也很簡單淡喜，主要的思路就是監(jiān)聽表單的submit事件，在表單提交的時候取消默認(rèn)動作，具體處理方式如下：
//Vue 組件
//login為表單的處理方法
<form @submit.prevent="login">
<input type="text" />
<button type="submit">提交</button>
</form>
//原生處理方法
var form = document.getElementById('formId');
form.onsubmit = function(e) {
//在此處理邏輯
//取消事件的默認(rèn)動作
e.preventDefault();
}
講到這里順便說下表單的提交方式，主要為以下兩種：
- <form action="yourPostUrl" method="post">
- ajax的post請求
第一種方式提交表單信息主要用于登錄来屠，優(yōu)點(diǎn)就是常用、語義化瘟芝，少了一些不必要的麻煩；缺點(diǎn)也很明顯润歉，無法獲取響應(yīng)信息模狭，一般form表單登錄之后都是由后端去處理邏輯，并且由后端重定向到某個頁面踩衩。那么嚼鹉，如果前端是單頁應(yīng)用SPA怎么辦贩汉？解決方法不止一種，這里采用后端邏輯處理完響應(yīng)給前端信息锚赤，由前端做跳轉(zhuǎn)操作匹舞，也就是第二種表單提交方式，通過ajax post
import axios from 'axios'
//采用qs庫對提交參數(shù)進(jìn)行處理
import qs from 'qs'
//這里采用axios
let param = {
username: 'xxx',
password: 'xxx'
}
//這里有坑的地方在线脚，你post的參數(shù)必須經(jīng)過特殊編碼處理
axios.post('yourPostUrl', qs.stringify(param)).then(() => {
//成功
}).catch(() => {
//失敗
})
表單驗證
表單驗證在我的印象里一直以來都是JS在處理赐稽，重新看了HTML5的form文檔后，我才知道原來有一些簡單的驗證交給表單的相關(guān)屬性就好了
根據(jù)type驗證
HTML5在<input>內(nèi)置了很多type浑侥，如果設(shè)置了某些特定的type屬性姊舵，那么瀏覽器自動對用戶的輸入進(jìn)行驗證，比如設(shè)置了<input type="url" />
根據(jù) min/max 進(jìn)行驗證
當(dāng)設(shè)置的type為number時寓落，還可以同時設(shè)置輸入的最大值和最小值括丁，比如<input type="number" max="2.5" />
讓表單成為必填
如果某個字段是必填的，可以給它添加required屬性伶选，支持這個屬性的瀏覽器可能會做出一些外觀/交互上的變化史飞，比如<input type="text" required>
總結(jié)
以上列舉的只是我在工作中偶然發(fā)現(xiàn)的一些問題，HTML5表單的很多新特性沒有貼出來仰税。在此感慨HTML5強(qiáng)大的同時构资，也對自己忽略了這些而慚愧，很多事情如果不持續(xù)學(xué)習(xí)很容易就被時代拋棄陨簇，比如web技術(shù)吐绵，如果不知道表單新特性，而通過js來模擬驗證反而耗費(fèi)多一些時間河绽，而且不知道出啥錯拦赠。嗯，告誡自己持續(xù)學(xué)習(xí)吧
