控制浏览器正确保存网站账号密码的技巧

问题背景

最近在开发一个基于 Vue 的 AI 聊天系统，注册页面中遇到了一个有趣的问题：当用户填写完注册表单并发送验证码后，浏览器会弹出保存密码的提示，但令人困惑的是，浏览器错误地将"验证码"识别为了"用户名"，而不是正确地识别邮箱地址。

这导致的结果是：用户完成注册后，浏览器保存的账号信息变成了"验证码+密码"的组合，而不是我们期望的"邮箱+密码"组合。下次用户访问登录页面时，浏览器会自动填充错误的信息，给用户带来困扰。

问题原因

这个问题的根本原因在于：浏览器会自动分析表单结构，并根据输入字段的特征来决定哪个是用户名/邮箱，哪个是密码。在没有明确指示的情况下，浏览器采用自己的"猜测"规则：

通常第一个文本输入框被视为用户名/邮箱
类型为password的输入框被视为密码

在我们的表单中，由于验证码输入框位于邮箱之后，密码之前，且没有添加适当的属性标识，导致浏览器错误地将验证码字段识别为了账户名。

解决方案

要解决这个问题，需要明确告诉浏览器每个字段的用途。HTML5 提供了autocomplete属性，可以精确控制浏览器的自动填充行为。

以下是我对注册表单的修改：

<form @submit.prevent="handleSubmit" class="form" autocomplete="on">
  <!-- 邮箱输入框 -->
  <input
    type="email"
    v-model="email"
    placeholder="邮箱地址"
    required
    name="email"
    autocomplete="email"
  />

  <!-- 验证码输入框 -->
  <input
    type="text"
    v-model="emailCode"
    placeholder="验证码"
    required
    maxlength="6"
    name="one-time-code"
    autocomplete="off"
  />

  <!-- 密码输入框 -->
  <input
    :type="showPassword ? 'text' : 'password'"
    v-model="password"
    placeholder="密码"
    required
    name="new-password"
    autocomplete="new-password"
  />
</form>