如何拆分PHP用户名验证函数并实现独立邮箱占用提示？

1. 拆分原校验函数 #

把同时处理用户名、邮箱校验的usernameExists拆分为两个独立函数，分别负责单一字段的唯一性检查：

// 校验用户名是否已被占用
function isUsernameTaken(username) {
  return db.users.findOne({ username });
}

// 校验邮箱是否已被占用
function isEmailTaken(email) {
  return db.users.findOne({ email });
}

2. 修改注册逻辑，返回独立错误提示 #

在注册流程中依次调用两个校验函数，分别返回对应的错误信息：

async function handleRegistration(username, email, password) {
  // 检查用户名
  const existingUser = await isUsernameTaken(username);
  if (existingUser) {
    return { success: false, error: "用户名已被占用" };
  }

  // 检查邮箱
  const existingEmail = await isEmailTaken(email);
  if (existingEmail) {
    return { success: false, error: "邮箱已被占用" };
  }

  // 校验通过，创建用户（假设已有密码哈希逻辑）
  await db.users.create({
    username,
    email,
    password: hashPassword(password)
  });

  return { success: true };
}

3. 保留用户名/邮箱登录功能 #

登录逻辑保持原有逻辑，通过$or查询匹配用户名或邮箱：

async function handleLogin(identifier, password) {
  const user = await db.users.findOne({
    $or: [{ username: identifier }, { email: identifier }]
  });

  if (!user || !verifyPassword(password, user.password)) {
    return { success: false, error: "用户名/邮箱或密码错误" };
  }

  // 生成登录凭证（如JWT）
  return { success: true, token: generateAuthToken(user) };
}

4. 前端显示对应错误提示 #

在注册表单提交后，根据后端返回的错误信息，将提示精准显示在对应输入框下方：

<form id="registerForm">
  <div>
    <input type="text" name="username" placeholder="请输入用户名" required>
    <span class="error-message" id="usernameError"></span>
  </div>
  <div>
    <input type="email" name="email" placeholder="请输入邮箱" required>
    <span class="error-message" id="emailError"></span>
  </div>
  <div>
    <input type="password" name="password" placeholder="请输入密码" required>
  </div>
  <button type="submit">注册</button>
</form>

<script>
document.getElementById('registerForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  
  // 清空之前的错误提示
  document.getElementById('usernameError').textContent = '';
  document.getElementById('emailError').textContent = '';

  const formData = new FormData(e.target);
  const payload = Object.fromEntries(formData);

  const res = await fetch('/api/register', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });

  const data = await res.json();
  if (!data.success) {
    if (data.error === "用户名已被占用") {
      document.getElementById('usernameError').textContent = data.error;
    } else if (data.error === "邮箱已被占用") {
      document.getElementById('emailError').textContent = data.error;
    }
  } else {
    // 注册成功，跳转至登录页
    window.location.href = '/login';
  }
});
</script>

内容的提问来源于stack exchange，提问作者Iro0