简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
儘管電子郵件地址有效，但Javascript的電子郵件驗證無法正常運作
P粉287345251
P粉287345251 2024-03-30 14:49:34
0
1
342

我正在使用 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()" - 我已在程式碼中刪除了它，但問題仍然存在。

任何幫助、建設性批評或有趣的笑話都值得讚賞。

謝謝。

P粉287345251
P粉287345251

全部回覆(1)
P粉364129744
P粉3641297442024-03-31 12:00:21 1樓

看起來您正在嘗試檢查兩個表單上的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

#
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！