Node.js服务端登录表单校验与错误信息页面回显实现咨询

Alright, let's figure out how to adjust your error display logic to work with server-side validation—since you need to check passwords stored on the server, moving validation there is totally the right move. Here are two practical approaches you can use, depending on whether you want to keep page refreshes or go for a smoother AJAX flow:

This works well if you want to keep your existing redirect-based server logic with minimal changes. We'll pass error codes through URL query parameters, then render them on the login page.

Step 1: Update Server-Side Logic (server.js) #

Modify your POST handler to check for validation errors, then redirect back to the login page with an error code if something's wrong:

// Assume you have a function to fetch stored passwords from your database
const getStoredPassword = (username) => {
  // Replace with your actual database lookup logic
  return users.find(user => user.username === username)?.password;
};

app.post('/login', (req, res) => {
  const { username, password } = req.body;
  const storedPassword = getStoredPassword(username);
  let errorCode = null;

  // Server-side validation checks
  if (!username) {
    errorCode = 'username_empty';
  } else if (!password || password.length < 6) {
    errorCode = 'password_too_short';
  } else if (password !== storedPassword) {
    errorCode = 'password_mismatch';
  }

  if (errorCode) {
    // Redirect back to login with error code as a query param
    return res.redirect(`/index.html?error=${encodeURIComponent(errorCode)}`);
  }

  // Validation passed, redirect to chat page
  res.redirect('/chat.html');
});

Step 2: Update Frontend Error Display (main.js) #

Add logic to check the URL for error parameters when the page loads, then show the corresponding message in your user-error div:

// Run when the login page loads
document.addEventListener('DOMContentLoaded', () => {
  const urlParams = new URLSearchParams(window.location.search);
  const errorCode = urlParams.get('error');
  
  // Map error codes to human-readable messages
  const errorMessages = {
    'username_empty': '用户名不能为空',
    'password_too_short': '密码长度不能少于6位',
    'password_mismatch': '密码错误，请重新输入'
  };

  const errorDiv = document.getElementById('user-error');
  if (errorCode && errorMessages[errorCode]) {
    errorDiv.textContent = errorMessages[errorCode];
    errorDiv.style.display = 'block'; // Show the error div if it's hidden by default
  }
});

// Optional: Keep basic frontend validation to avoid unnecessary server requests
const loginForm = document.getElementById('login-form');
loginForm.addEventListener('submit', (e) => {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  const errorDiv = document.getElementById('user-error');
  let hasFrontendError = false;

  if (!username) {
    errorDiv.textContent = '用户名不能为空';
    hasFrontendError = true;
  } else if (!password || password.length < 6) {
    errorDiv.textContent = '密码长度不能少于6位';
    hasFrontendError = true;
  }

  if (hasFrontendError) {
    e.preventDefault(); // Block form submission
    errorDiv.style.display = 'block';
  }
});

For a smoother user experience (no page reloads), use asynchronous form submission. The server will return JSON with errors, and the frontend will display them without redirecting.

Step 1: Update Server-Side Logic (server.js) #

Instead of redirecting, return a JSON response with errors or a success status:

app.post('/login', (req, res) => {
  const { username, password } = req.body;
  const storedPassword = getStoredPassword(username);
  const errors = {};

  // Collect validation errors
  if (!username) errors.username = '用户名不能为空';
  if (!password || password.length < 6) errors.password = '密码长度不能少于6位';
  if (Object.keys(errors).length === 0 && password !== storedPassword) {
    errors.password = '密码错误，请重新输入';
  }

  if (Object.keys(errors).length > 0) {
    // Return 400 Bad Request with error details
    return res.status(400).json({ errors });
  }

  // Validation passed: return success and redirect URL
  res.json({ success: true, redirectUrl: '/chat.html' });
});

Step 2: Update Frontend Logic (main.js) #

Replace the default form submission with a Fetch call to handle the asynchronous response:

const loginForm = document.getElementById('login-form');
const usernameErrorDiv = document.getElementById('username-error'); // Add a dedicated div for username errors
const passwordErrorDiv = document.getElementById('password-error'); // Add a dedicated div for password errors
const generalErrorDiv = document.getElementById('general-error'); // Optional: for network errors

loginForm.addEventListener('submit', async (e) => {
  e.preventDefault(); // Prevent default form reload

  // Clear previous errors
  usernameErrorDiv.textContent = '';
  passwordErrorDiv.textContent = '';
  generalErrorDiv.textContent = '';

  // Collect form data
  const formData = new FormData(loginForm);
  const loginData = Object.fromEntries(formData);

  try {
    const response = await fetch('/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(loginData)
    });

    const result = await response.json();

    if (result.success) {
      // Redirect to chat page on success
      window.location.href = result.redirectUrl;
    } else {
      // Display specific errors next to their inputs
      if (result.errors.username) {
        usernameErrorDiv.textContent = result.errors.username;
        usernameErrorDiv.style.display = 'block';
      }
      if (result.errors.password) {
        passwordErrorDiv.textContent = result.errors.password;
        passwordErrorDiv.style.display = 'block';
      }
    }
  } catch (err) {
    // Handle network errors
    generalErrorDiv.textContent = '登录失败，请稍后重试';
    generalErrorDiv.style.display = 'block';
  }
});

Key Notes #

• Frontend Safety: Always use textContent instead of innerHTML to display error messages to avoid XSS attacks.
• Input Sanitization: On the server, sanitize user inputs before checking against your database to prevent injection attacks.
• User Experience: Keeping basic frontend validation (like checking for empty fields) reduces unnecessary server requests and gives users immediate feedback.

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