JavaScript表单验证与提交功能异常求助

问题梳理 #

1. 邮箱验证逻辑异常：输入@gmail.com结尾的邮箱仍触发错误提示，无法通过验证
2. 验证成功后无法跳转到指定的confirmation.html页面

故障原因与修复步骤 #

1. 邮箱验证逻辑错误 #

原因：原正则表达式/^[^@]+gmail\.com$/缺少@符号，无法匹配xxx@gmail.com的正确格式——正则中的[^@]+匹配不含@的字符，后面直接接gmail.com，导致只有xxxygmail.com这类不符合规范的字符串才能通过验证。

修复：

• 修正正则为/^[^@]+@gmail\.com$/，确保包含@符号
• 补充空值判断，覆盖“输入框为空”的验证场景

2. 页面跳转问题 #

原因：

• 原验证逻辑错误导致代码从未执行到跳转语句
• 可能存在confirmation.html路径错误（需确保文件与当前页面在同一目录，或使用正确的相对/绝对路径）

修复：

• 先确保验证逻辑正确执行，再检查文件路径是否匹配项目结构

修改后的完整代码 #

HTML（无需改动，保持原结构） #

<div id="main">
  <div class="section">
    <!-- Other HTML elements -->
    <p class="Email">Email address</p>
    <input type="email" id="Email" placeholder="email@company.com">
    <div id="error-message"></div>
    <button id="valid" type="button">Subscribe to monthly newsletter</button> 
  </div>
  <div class="illustration-sign-up-desktop">
    <img src="./assets/images/illustration-sign-up-desktop.svg" height="550px" alt="illustration-sign-up-desktop">
  </div>  
</div>

JavaScript（修正验证逻辑与跳转逻辑） #

const emailInput = document.getElementById('Email');
const errorElement = document.getElementById('error-message');
const submitBtn = document.getElementById('valid');

// 实时输入验证
emailInput.addEventListener('input', () => {
    const userEmail = emailInput.value.trim().toLowerCase();
    const gmailRegex = /^[^@]+@gmail\.com$/;

    if (!userEmail) {
        errorElement.textContent = '邮箱不能为空';
        errorElement.classList.add('error-message');
    } else if (!gmailRegex.test(userEmail)) {
        errorElement.textContent = '请输入有效的@gmail.com邮箱';
        errorElement.classList.add('error-message');
    } else {
        errorElement.textContent = '';
        errorElement.classList.remove('error-message');
    }
});

// 提交验证与跳转
submitBtn.addEventListener('click', () => {
    const userEmail = emailInput.value.trim().toLowerCase();
    const gmailRegex = /^[^@]+@gmail\.com$/;

    // 空值校验
    if (!userEmail) {
        errorElement.textContent = '邮箱不能为空';
        errorElement.classList.add('error-message');
        return;
    }

    // 格式校验
    if (!gmailRegex.test(userEmail)) {
        errorElement.textContent = '请输入有效的@gmail.com邮箱';
        errorElement.classList.add('error-message');
        return;
    }

    // 验证通过，跳转页面
    // 注意：确认confirmation.html的路径是否正确，同目录用'confirmation.html'，根目录用'/confirmation.html'
    window.location.href = 'confirmation.html';
});

额外说明 #

• 使用trim()处理输入前后空格，避免用户输入无效空格导致的验证错误
• 错误提示文本更精准，帮助用户明确问题所在
• 若跳转仍失败，可在浏览器控制台查看是否有404错误，确认文件路径是否正确

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