在开发中偶然遇到的一个奇怪的问题,有一个需求会让用户输入邮箱和密码信息,该表单设置了校验规则(当<input/>
触发blur
时,才会触发校验),但之后的测试发现,只要进入该页面时,就会反复触发校验,导致后台接口被频繁请求。于是乎检查代码,初步判定是校验规则出现死循环导致,但考虑到需要blur
才能触发校验,再三检查代码后排除代码问题。于是查看浏览器页面行为,发现该表单邮箱账号密码字段被Chrome浏览器默认填写,导致反复触发校验。
问题:
类似于这样的结构,浏览器会默认填写字段。
分析原因:
浏览器默认开启的表单填写
浏览器设置如图:
以Chrome为例,当浏览器遇到type="text"
与type="password"
的<input/>
标签紧邻时,会触发浏览器填写行为。默认为黄色背景。
正常:
触发自动填充:
解决方式:
既然浏览器遇到type="text"
与type="password"
的<input/>
标签紧邻时触发自动填充行为,则将两个<input/>
隔开,使用隐藏的方式“欺骗”浏览器,将密码信息填写在隐藏区域。
经测试问题解决。