注册表单JavaScript邮箱验证失效，输入有效邮箱仍报错求助

问题核心在于注册表单的submit事件监听器错误引用了登录表单的邮箱元素，导致无论注册邮箱输入是否有效，都会触发错误提示。

修复步骤： #

1. 补充获取注册表单的邮箱元素到JS变量声明中
2. 修改注册表单的验证逻辑，使用注册邮箱元素的validity.valid属性做判断
3. 彻底移除注册按钮上多余的onclick="validateRegister()"（你提到已移除，确保代码中完全删除）

修正后的完整代码： #

<html>
    <form class="forms" id="login-form" onsubmit="return false" novalidate>
        <h1>Log In</h1>
        <div class="form-div">
            <label for="email">Your Email:</label>
            <input type="email" id="email" name="email" required>
            <span class="error"></span>
        </div>
        <button class="wide-buttons" type="submit">Log In</button>
        <p onclick="toggleForms()">Need an account? Click here to sign up!</p>
    </form>
    <form class="forms" id="register-form" onsubmit="return false" novalidate>
        <h1>Register</h1>
        <div class="form-div">
            <label for="email">Your Email:</label>
            <input type="email" id="register-email" name="register-email" required>
            <span class="error"></span>
        </div>
        <button class="wide-buttons" type="submit">Sign Up</button>
        <p onclick="toggleForms()">Already have an account? Click here to log in!</p>
    </form>
    <script>
        const loginForm = document.getElementById("login-form");
        const email = document.getElementById("email"); // 显式声明登录邮箱元素，避免依赖全局自动挂载
        const emailError = document.querySelector("#email + span.error");
        const registerForm = document.getElementById('register-form');
        const registerEmail = document.getElementById('register-email'); // 新增：获取注册邮箱元素
        const regEmailError = document.querySelector("#register-email + span.error");

        loginForm.addEventListener("submit", (event) => {
            if (!email.validity.valid) {
                emailError.textContent = "You must enter a valid email address";
            } else {
                emailError.textContent = ""; // 验证通过时清空错误提示
            }
        });

        registerForm.addEventListener("submit", (event) => {
            if (!registerEmail.validity.valid) { // 改为用注册邮箱元素判断
                regEmailError.textContent = "You must enter a valid email address";
            } else {
                regEmailError.textContent = ""; // 验证通过时清空错误提示
            }
        });
    </script>
</html>

额外优化说明： #

• 显式声明登录邮箱元素，避免依赖浏览器自动将ID挂载到window对象的特性，代码更健壮
• 增加验证通过时清空错误提示的逻辑，提升用户体验

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