开发中无意中遇到的一个奇葩问题。要求用户输入电子邮件地址和密码信息。表单设置了校验规则(当触发blur时,会触发校验),但后续测试发现只要进入页面,就会重复触发校验,导致频繁请求后台接口.于是查了下代码,初步判断是验证规则是死循环导致的,但是考虑到需要blur才能触发验证,所以再三查代码排除了代码问题。于是查看了浏览器页面的行为,发现是Chrome浏览器默认填写了表单的邮箱账号密码字段,导致验证被反复触发。问题:
类似这种结构,浏览器会通过默认。分析原因:浏览器默认打开的浏览器设置如图:以Chrome为例,当浏览器遇到标签旁边有type="text"和type="password"其他,会触发浏览器填写行为。默认为黄色背景。正常:触发自动填充:解决方法:由于浏览器在遇到旁边有type="text"和type="password"的标签时会触发自动填充行为,将两个分开,使用隐藏的方式“欺骗”浏览器,在隐藏区域填入密码信息。经测试问题解决。