我正在使用 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