Saya sedang membuat dua borang menggunakan html dan javascript, satu untuk "Log Masuk" dan satu lagi untuk "Daftar". Saya menggunakan JavaScript untuk menyemak sama ada input pada borang adalah sah. Saya menghadapi masalah di mana medan 'e-mel' pada borang 'log masuk' mengesahkan dengan betul, tetapi medan 'e-mel' pada borang 'pendaftaran' tidak mengesahkan, walaupun mereka menggunakan pendengar acara yang hampir sama untuk mengesahkan Enter .
Ini ialah versi kod yang dilucutkan yang saya gunakan untuk melakukan ini
<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>
Saya menggunakan pendengar acara pada setiap borang untuk mengendalikan acara "serahkan", acara "loginForm" berfungsi seperti yang saya jangkakan, tetapi acara "registerForm" menunjukkan mesej ralat apabila e-mel itu bukan e-mel yang sah atau apa-apa sahaja lain masukkan ke dalam medan e-mel. Saya keliru dengan ini memandangkan penonton adalah hampir sama. Saya sebenarnya tidak perlu menyerahkan borang kepada apa-apa, saya hanya mahu memahami cara beberapa pengesahan borang asas berfungsi. Kod ini ialah coretan semua perkara lain yang telah saya tulis, tetapi kata laluan, kotak semak, dll. berfungsi dengan baik untuk saya. Saya hanya perlu tahu cara membuat pendengar acara "registerForm" berfungsi dengan cara yang sama seperti pendengar acara "loginForm".
EDIT: Saya mengetahui onclick="validateRegister()" pada borang pendaftaran - Saya telah mengalih keluarnya dalam kod, tetapi masalah itu berterusan.
Sebarang bantuan, kritikan membina atau jenaka lucu amat dihargai.
Terima kasih.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Nampaknya anda cuba menyemak kesahihan
email输入元素的有效性，但您应该检查register-email事件侦听器上的register-emailelemen input pada dua borang.Ubah:
if (!email.validity.valid) { regEmailError.textContent = "You must enter a valid email address"; }Kepada:
const registerEmail = document.getElementById('register-email'); if (!registerEmail.validity.valid) { regEmailError.textContent = "You must enter a valid email address"; }Sepatutnya tiada masalah
Edit 1: Anda boleh mengisytiharkan di atas pendengar acara
registerEmail