简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Pengesahan e-mel dengan Javascript tidak berfungsi walaupun alamat e-mel yang sah
P粉287345251
P粉287345251 2024-03-30 14:49:34
0
1
347

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.

P粉287345251
P粉287345251

membalas semua(1)
P粉364129744
P粉3641297442024-03-31 12:00:21 Tingkat 1

Nampaknya anda cuba menyemak kesahihan email 输入元素的有效性，但您应该检查 register-email 事件侦听器上的 register-email elemen 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

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！