注册表单JavaScript邮箱验证功能问题求助

原代码存在的问题 #

• 拼写错误：注释代码中nostice_2应为notice_2，且移除类名时错误添加了.（remove(".hidden")应该是remove("hidden")）
• 邮箱分割逻辑漏洞：当输入的邮箱不含@时，Email.value.split("@")只会返回一个元素，此时email变量会是undefined，直接调用includes会报错
• 验证逻辑错误：原注释中的!(email.includes("gmail.com")) || !(email.includes("hotmail.com"))会导致只要邮箱不是其中一个域名就触发错误，逻辑应为“既不是gmail也不是hotmail才触发错误”，即使用&&而非||
• 验证方式不够严谨：直接用字符串分割判断不如正则表达式更符合邮箱格式规范

修正后的完整代码 #

HTML（无需修改）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" />
    <title>Confirmation</title>
</head>

<body>
    <div class="container">
        <form action="">
            <label for="">Name</label><br>
            <input class="bar" id="Name" type="text"><br>
            <label for="">Email</label><br>
            <input class="bar" id="Email" type="text"><br>
            <label for="">Password</label><br>
            <input class="bar" id="password" type="password"><br>
            <label for="">Confirm Password</label><br>
            <input class="bar" id="password-confirm" type="password"><br>
            <input class="submit" type="button" value="Sing Up">
        </form>
        <ul class="warning">
            <li class="notice hidden" id="notice--1">Name is required</li>
            <li class="notice hidden" id="notice--2">Email is invalid</li>
            <li class="notice hidden" id="notice--3">Password must be 6 character or more</li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS（无需修改）

html{
    padding: 0;
    margin: 0;
    
}
.container{
    position: absolute;
    right: 40%;
    top: 30%;
    box-shadow: 5px 5px 30px 30px rgba(0, 0, 0, 0.1);
    padding: 50px;
}
.notice{
    color: red;
}
.hidden{
    visibility: hidden;
}

JavaScript（修正邮箱验证逻辑）

const container = document.querySelector(".container");
const Name = document.querySelector("#Name");
const Email = document.querySelector("#Email");
const Password = document.querySelector("#password");
const Password__Confirm = document.querySelector("#password-confirm");
const Submit = document.querySelector(".submit");
const Notice = document.querySelectorAll(".notice");
const notice_1 = document.querySelector("#notice--1");
const notice_2 = document.querySelector("#notice--2");
const notice_3 = document.querySelector("#notice--3");

Submit.addEventListener("click", () => {
  const nameLength = Name.value.length;
  const emailValue = Email.value.trim();
  const password = Password.value;
  const password_c = Password__Confirm.value;

  // 先隐藏所有提示
  Notice.forEach((notice) => {
    notice.classList.add("hidden");
  });

  // 姓名验证
  if (nameLength <= 1) {
    notice_1.classList.remove("hidden");
  }

  // 邮箱验证：正则匹配格式+限定域名
  const emailRegex = /^[^\s@]+@(gmail\.com|hotmail\.com)$/;
  if (!emailRegex.test(emailValue)) {
    notice_2.classList.remove("hidden");
  }

  // 密码验证
  if (password.length < 6 || password !== password_c) {
    notice_3.classList.remove("hidden");
  }
});

关键修改说明 #

1. 重构邮箱验证逻辑：使用正则表达式/^[^\s@]+@(gmail\.com|hotmail\.com)$/，既验证了邮箱的基本格式（包含@、前后无空白字符），又严格限制了允许的域名，避免了字符串分割可能出现的报错
2. 调整验证顺序：先统一隐藏所有提示，再分别进行各项验证，避免循环内重复操作导致的逻辑混乱
3. 优化代码结构：移除冗余的console.log，让代码更简洁易读

内容的提问来源于stack exchange，提问作者Azat Deniz Işık