禁止瀏覽器自動填充到表單

在開發中偶然遇到的一個奇怪的問題，有一個需求會讓用戶輸入郵箱和密碼信息，該表單設置了校驗規則（當<input/>觸發blur時，纔會觸發校驗），但以後的測試發現，只要進入該頁面時，就會反覆觸發校驗，致使後臺接口被頻繁請求。因而乎檢查代碼，初步斷定是校驗規則出現死循環致使，但考慮到須要blur才能觸發校驗，再三檢查代碼後排除代碼問題。因而查看瀏覽器頁面行爲，發現該表單郵箱帳號密碼字段被Chrome瀏覽器默認填寫，致使反覆觸發校驗。

問題：

<form>
        <input type="text" name="username"/>
        <input type="password" name="password"/>
    </form>

相似於這樣的結構，瀏覽器會默認填寫字段。

分析緣由：

瀏覽器默認開啓的表單填寫

瀏覽器設置如圖：

以Chrome爲例，當瀏覽器遇到type="text"與type="password"的<input/>標籤緊鄰時，會觸發瀏覽器填寫行爲。默認爲黃色背景。

正常：

觸發自動填充：

解決方式：

既然瀏覽器遇到type="text"與type="password"的<input/>標籤緊鄰時觸發自動填充行爲，則將兩個<input/>隔開，使用隱藏的方式「欺騙」瀏覽器，將密碼信息填寫在隱藏區域。

<form>
        <input type="text" name="username"/>
        <input style="display:none" type="text" name="fakeusernameremembered"/>
        <input style="display:none" type="password" name="fakepasswordremembered"/>
        <input type="password" name="password"/>
    </form>

經測試問題解決。