JavaScript自定义表单验证问题：提示不显示+邮编验证失效

Hey Kate, let's work through these validation bugs together—you’ve got the core logic right, just a few small syntax and logic tweaks needed to get everything working as expected.

Let’s Break Down the Problems & Fixes #

1. Custom Error Alerts Not Showing (Name/Email) #

The main culprit here is a syntax error in your email validation line: you used a single equals sign (=) instead of a double equals (==) (or better, triple equals ===) for comparison. This was assigning false to the test result instead of checking if it was false, which completely broke that section of logic.

Also, your email regex had a typo (missing an opening [ in the character class) and using a regex literal (/.../) instead of new RegExp() is cleaner—it avoids escape character headaches that come with string-based regex definitions.

2. Postcode Validation Not Enforcing 4-Digit Requirement #

While your HTML includes a pattern attribute, your JavaScript only checked input length, not whether the input was actually a number. We’ll add a regex check that verifies both the 4-digit length and numeric format in one go.

3. Bonus: Clear Old Alerts Before Re-Validating #

Right now, if a user fixes one error and submits again, old error messages will stay visible. We’ll add a quick step to clear all alerts at the start of the function to keep things clean.

Corrected Code #

Updated JavaScript #

function validation() {
  // Clear all previous error alerts first
  document.getElementById("nameAlert").innerHTML = "";
  document.getElementById("emailAlert").innerHTML = "";
  document.getElementById("postcodeAlert").innerHTML = "";

  // Use regex literals for cleaner, more reliable syntax
  const emailPattern = /^[\w.%+-]+@domain\.com\.au$/;
  const postcodePattern = /^[0-9]{4}$/;

  // Get trimmed input values to ignore accidental spaces
  const nameInput = document.getElementById("name").value.trim();
  const emailInput = document.getElementById("email").value.trim();
  const postcodeInput = document.getElementById("postcode").value.trim();

  // Validate Name
  if (nameInput.length === 0) {
    document.getElementById("nameAlert").innerHTML = "<em>Please enter your name here</em>";
    return false;
  }

  // Validate Email
  if (!emailPattern.test(emailInput)) {
    document.getElementById("emailAlert").innerHTML = "<em>Your email must end with @domain.com.au</em>";
    return false;
  }

  // Validate Postcode (covers numeric format AND 4-digit length)
  if (!postcodePattern.test(postcodeInput)) {
    document.getElementById("postcodeAlert").innerHTML = "<em>Your postcode must be exactly 4 digits</em>";
    return false;
  }

  return true;
}

Updated HTML #

(We’ll keep your core structure, just add a touch of inline styling to make errors more visible—you can move this to a CSS file later if you prefer)

<form method="POST" action="#" onsubmit="return validation();">
  <label for="name">Name</label>
  <input type="text" name="name" id="name"><span id="nameAlert" style="color: crimson; margin-left: 8px;"></span><br><br>
  
  <label for="email">Email</label>
  <input type="email" name="email" id="email"><span id="emailAlert" style="color: crimson; margin-left: 8px;"></span><br><br>
  
  <label for="postcode">Postcode</label>
  <input type="text" name="postcode" id="postcode"><span id="postcodeAlert" style="color: crimson; margin-left: 8px;"></span><br><br>
  
  <button type="submit">Submit Query</button>
</form>

Key Improvements Explained #

• Fixed comparison logic: Swapped the broken = false assignment for !emailPattern.test(emailInput)—a more readable way to check if the regex test fails.
• Trimmed inputs: Removes accidental leading/trailing spaces, so a name with just spaces won’t incorrectly pass validation.
• Combined postcode checks: The regex ^[0-9]{4}$ ensures the input is exactly 4 digits (no letters, symbols, or shorter/longer entries).
• Clear alerts on re-submit: Old error messages won’t stick around when the user tries again.
• Visible error styling: Added subtle color to alerts so users notice them immediately.

Give this a try—your custom alerts should now pop up correctly, and the postcode will enforce the 4-digit rule perfectly!

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