我正在使用 html 和 javascript 制作两种表单，一种用于“登录”，另一种用于“注册”。我使用 JavaScript 来检查表单上的输入是否有效。我遇到了一个问题，即“登录”表单上的“电子邮件”字段已正确验证，但“注册”表单上的“电子邮件”字段未正确验证，尽管它们使用几乎相同的事件侦听器来验证输入.
这是我用来执行此操作的代码的精简版本
<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" onclick="validateRegister()">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 emailError = document.querySelector("#email + span.error");
const registerForm = document.getElementById('register-form');
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";
}
});
registerForm.addEventListener("submit", (event) => {
if (!email.validity.valid) {
regEmailError.textContent = "You must enter a valid email address";
}
});
</script>
我在每个表单上使用事件侦听器来处理“提交”事件，“loginForm”事件按照我的预期方式工作，但是“registerForm”事件在电子邮件是电子邮件时显示错误消息将有效的电子邮件或其他任何内容放入电子邮件字段中。考虑到听众实际上是相同的，我对此感到困惑。我不需要实际将表单提交给任何东西，我只是想了解一些基本的表单验证是如何工作的。这段代码是我编写的所有其他内容的片段，但我的密码、复选框等对我来说工作得很好。我只需要知道如何让“registerForm”事件侦听器以与“loginForm”事件侦听器相同的方式工作。
编辑：我知道注册表单上的 onclick="validateRegister()" - 我已在代码中删除了它，但问题仍然存在。
任何帮助、建设性批评或有趣的笑话都值得赞赏。
谢谢。
看起来您正在尝试检查两个表单上的
email输入元素的有效性，但您应该检查register-email事件侦听器上的register-email输入元素的有效性。更改：
if (!email.validity.valid) { regEmailError.textContent = "You must enter a valid email address"; }致：
const registerEmail = document.getElementById('register-email'); if (!registerEmail.validity.valid) { regEmailError.textContent = "You must enter a valid email address"; }应该没问题
编辑1：Ofc您可以在事件侦听器上方声明
registerEmail