简体中文(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
341

我正在使用 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学习者快速成长！