求助：实现用户名与密码的JavaScript页面验证功能

Got it, let's build this login page with validation step by step. Here's a complete, working solution that fits your requirements:

1. HTML Structure #

First, we'll create a straightforward form with all necessary elements, including a section to display validation errors:

<div class="login-container">
  <h2>Login</h2>
  <form id="loginForm">
    <div class="form-group">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" placeholder="Enter your username">
      <span class="error-message" id="usernameError"></span>
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" placeholder="Enter your password">
      <span class="error-message" id="passwordError"></span>
    </div>
    <button type="submit">Login</button>
  </form>
</div>

2. Basic CSS (Optional but Polished) #

To make the form look clean and user-friendly, add some simple styling:

.login-container {
  max-width: 300px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.error-message {
  color: #dc3545;
  font-size: 0.875em;
  display: block;
  margin-top: 3px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

3. JavaScript Validation Logic #

Now the core part—implementing the exact validation rules you specified. We'll write dedicated validation functions and hook them to the form's submit event:

// Grab form elements
const loginForm = document.getElementById('loginForm');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const usernameError = document.getElementById('usernameError');
const passwordError = document.getElementById('passwordError');

// Validate username per your requirements
function validateUsername(username) {
  // Regex: only letters, @, ., and 1-25 characters total
  const usernameRegex = /^[A-Za-z@.]{1,25}$/;
  
  if (!username) {
    return 'Username is required';
  }
  if (!usernameRegex.test(username)) {
    return 'Username can only contain letters, @, and .; max 25 characters';
  }
  return ''; // No error
}

// Basic password validation (easily extendable)
function validatePassword(password) {
  if (!password) {
    return 'Password is required';
  }
  // Add more rules here if needed (e.g., min length, special characters)
  return ''; // No error
}

// Handle form submission
loginForm.addEventListener('submit', function(e) {
  e.preventDefault(); // Stop default form reload
  
  // Clear old error messages
  usernameError.textContent = '';
  passwordError.textContent = '';
  
  // Get trimmed input values
  const username = usernameInput.value.trim();
  const password = passwordInput.value.trim();
  
  // Run validations
  const usernameErr = validateUsername(username);
  const passwordErr = validatePassword(password);
  
  // Display errors if any
  let hasError = false;
  if (usernameErr) {
    usernameError.textContent = usernameErr;
    hasError = true;
  }
  if (passwordErr) {
    passwordError.textContent = passwordErr;
    hasError = true;
  }
  
  // Proceed if no errors (replace with your backend call)
  if (!hasError) {
    alert('Validation passed! Ready to submit login data...');
    // loginForm.submit(); // Uncomment to submit the form normally
  }
});

Extra Tips #

• Real-Time Validation: If you want to validate as the user types, add this snippet to the JavaScript:

  usernameInput.addEventListener('input', function() {
    const err = validateUsername(this.value.trim());
    usernameError.textContent = err;
  });
  

• Password Rules: The password validation here is minimal (just required), but you can expand it by adding checks for minimum length, special characters, etc., directly in the validatePassword function.

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