禁止浏览器自动填充到表单

在开发中偶然遇到的一个奇怪的问题，有一个需求会让用户输入邮箱和密码信息，该表单设置了校验规则（当<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>

经测试问题解决。