我用html和javascript制作了两个表单，一个用于" log in ";还有一个用于"注册"。我使用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>
我正在使用事件监听器进行"提交"。事件和" loginfo "正在工作的方式，我打算它，但一个为&;registerform &;是显示我的错误信息时，电子邮件是一个有效的电子邮件或其他任何东西都放入电子邮件字段。考虑到听众几乎一模一样，我对此感到困惑。我不需要提交表单给任何东西，我只是想了解一些基本的表单验证是如何工作的。这段代码是我写的所有东西的一个片段，但是我的密码，复选框等对我来说工作得很好。我只需要知道如何获得"registerForm"事件侦听器的工作方式与" loginfo "一个是.
我知道onclick=" validaterregister ()"在注册表上-我已经在我的代码中删除了这个，我仍然有这个问题。任何帮助，建设性的批评，或有趣的笑话都是感激的。
谢谢。
看起来您正在尝试检查两个表单上email输入元素的有效性，但您应该检查registerForm事件侦听器上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";
}
应该没问题
Edit1: Ofc可以在事件监听器上面声明registerEmail