我正在使用 html 和 javascript 制作兩種表單，一種用于“登錄”，另一種用于“注冊”。我使用 JavaScript 來檢查表單上的輸入是否有效。我遇到了一個問題，即“登錄”表單上的“電子郵件”字段已正確驗證，但“注冊”表單上的“電子郵件”字段未正確驗證，盡管它們使用幾乎相同的事件偵聽器來驗證輸入.
這是我用來執(zhí)行此操作的代碼的精簡版本
<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>
我在每個表單上使用事件偵聽器來處理“提交”事件，“l(fā)oginForm”事件按照我的預期方式工作，但是“registerForm”事件在電子郵件是電子郵件時顯示錯誤消息將有效的電子郵件或其他任何內容放入電子郵件字段中。考慮到聽眾實際上是相同的，我對此感到困惑。我不需要實際將表單提交給任何東西，我只是想了解一些基本的表單驗證是如何工作的。這段代碼是我編寫的所有其他內容的片段，但我的密碼、復選框等對我來說工作得很好。我只需要知道如何讓“registerForm”事件偵聽器以與“l(fā)oginForm”事件偵聽器相同的方式工作。
編輯：我知道注冊表單上的 onclick="validateRegister()" - 我已在代碼中刪除了它，但問題仍然存在。
任何幫助、建設性批評或有趣的笑話都值得贊賞。
謝謝。
1
0
0
看起來您正在嘗試檢查兩個表單上的 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
