请求实现带白名单验证的登录表单：跳转显示与失败交互需求

我来帮你一步步搞定这个登录表单的三个核心功能，分模块给你捋清楚：

1. 白名单用户登录校验 #

首先说白名单校验——前端只适合做模拟测试，生产环境绝对要把这个逻辑放在后端，不然白名单很容易被破解泄露。

前端模拟实现（用于测试） #

我们可以用数组先存允许的用户信息，提交表单时对比输入的账号密码：

// 模拟白名单（实际项目中请从后端接口获取验证结果）
const allowedUsers = [
  { username: "emp_zhangsan", password: "zs123456" },
  { username: "emp_lisi", password: "ls654321" }
];

// 监听表单提交
document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止页面默认刷新
  
  const username = document.getElementById('username').value.trim();
  const password = document.getElementById('password').value.trim();
  
  // 校验是否在白名单内
  const isValidUser = allowedUsers.some(user => user.username === username && user.password === password);
  
  isValidUser ? handleLoginSuccess(username) : handleLoginFailure();
});

2. 登录成功跳转与用户名显示 #

登录成功后，我们把用户名存在会话存储里，跳转到目标页面后再读取显示：

登录成功处理逻辑 #

function handleLoginSuccess(username) {
  // 存储当前登录用户（会话有效期，关闭浏览器自动清除）
  sessionStorage.setItem('currentLoggedInUser', username);
  // 跳转到目标页面
  window.location.href = 'PF1.1.html';
}

PF1.1.html 页面的用户名显示代码 #

在PF1.1.html的页面底部添加这段代码，就能在右下角显示当前登录用户：

<!-- 右下角用户标识容器 -->
<div id="userIndicator"></div>

<script>
window.addEventListener('load', function() {
  const currentUser = sessionStorage.getItem('currentLoggedInUser');
  const userIndicator = document.getElementById('userIndicator');
  
  if (currentUser) {
    userIndicator.textContent = `当前登录：${currentUser}`;
    // 设置固定定位样式
    userIndicator.style.cssText = `
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 8px 16px;
      background-color: #f5f5f5;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    `;
  }
});
</script>

3. 登录失败的交互效果 #

要实现输入框抖动+错误提示的效果，我们用CSS动画配合JS控制：

CSS 动画与样式 #

/* 输入框抖动动画 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* 错误提示样式 */
.error-message {
  color: #dc3545;
  font-size: 14px;
  margin-top: 8px;
  display: none;
}

/* 抖动触发类 */
.shake {
  animation: shake 0.6s ease-in-out;
  border-color: #dc3545 !important;
}

登录表单HTML结构（添加错误提示容器） #

<form id="loginForm">
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" required>
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" required>
  </div>
  <!-- 错误提示框 -->
  <div class="error-message" id="errorMsg">用户名或密码错误，请重试</div>
  <button type="submit">登录</button>
</form>

登录失败处理逻辑 #

function handleLoginFailure() {
  const errorMsg = document.getElementById('errorMsg');
  const usernameInput = document.getElementById('username');
  const passwordInput = document.getElementById('password');
  
  // 显示错误提示
  errorMsg.style.display = 'block';
  
  // 给输入框添加抖动动画
  usernameInput.classList.add('shake');
  passwordInput.classList.add('shake');
  
  // 动画结束后移除抖动类，方便下次触发
  setTimeout(() => {
    usernameInput.classList.remove('shake');
    passwordInput.classList.remove('shake');
  }, 600);
  
  // 清空密码输入框
  passwordInput.value = '';
}

额外注意事项 #

• 生产环境中，白名单校验必须通过后端接口完成，前端只负责提交数据和接收结果，绝对不能把白名单存在前端。
• 密码不应明文存储或传输，实际项目中要配合HTTPS，并且密码可以用哈希算法加密后再提交。
• 如果需要"记住我"功能，可以用localStorage替代sessionStorage，但要注意账号安全风险。

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