HTML表单JavaScript验证错误提示未正常显示求助

问题根源 #

你的代码存在几个关键错误导致错误提示无法显示：

• DOM元素选择错误：获取输入框时未使用正确的class选择器（缺少.）
• 正则验证逻辑完全错误：错误调用value.classList.add()来验证正则，这不是正确的验证方式
• 类名添加对象错误：invalid类加在了输入框上，但CSS规则是给父容器加该类才会触发错误提示显示
• 变量名拼写错误：emaiPattern少写了一个字母l，导致正则引用失效

修正后的完整代码 #

HTML（保持不变） #

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

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="./favicon.ico" type="image/x-icon">
  <!-- Form icons -->
  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
  <main>
    <!-- Sign Up -->
    <section>
      <form method="/">
        <div class="hero is-fullheight">
            <div class="hero-body is-justify-content-center is-align-items-center">
                <div class="columns is-flex is-flex-direction-column box">
                  <h1 class="title">Please enter your credentials</h1>
                    <div class="column emailField">
                        <label for="email">School Email</label>
                        <div class = "inputField">
                        <input id="signup-email" class="input is-primary email" type="text" placeholder="Email address" required>
                        </div>
                        <span class = "error email-error">
                          <i class='bx bx-error-circle error-icon'></i>
                          <p class = "error-text">Please enter a valid email</p></span>
                    </div>
                    <div class="column usernameField">
                        <label for="Name">Username</label>
                        <input id="signup-user" class="input is-primary username" type="username" placeholder="Username" required>
                        <span class = "error username-error">
                          <i class='bx bx-error-circle error-icon'></i>
                          <p class = "error-text">Please enter only alphabetical letters</p>
                        </span>
                    </div>
                    <div class="column schoolField">
                        <label for="Name">School ID</label>
                        <input id="signup-id" class="input is-primary schoolID" type="text" placeholder="School ID" required>
                        <span class = "error schoolID-error">
                          <i class='bx bx-error-circle error-icon'></i>
                          <p class = "error-text">School ID should only contain digits</p>
                        </span>
                    </div>
                    <div class="column passwordField">
                        <label for="Name">Password</label>
                        <input id="signup-pwd" class="input is-primary password" type="password" placeholder="Password" required>
                        <span class = "error password-error">
                          <i class='bx bx-error-circle error-icon'></i>
                          <p class = "error-text">Please enter at least 8 characters with a number, symbol<br> and uppercase and lowercase character</p>
                        </span>
                        <a href="#navbar" class="is-size-7 has-text-primary">forget password?</a>
                    </div>
                    <div class="column">
                        <button id="signup" class="button is-primary is-fullwidth" type="submit">Sign Up</button>
                    </div>
                    <div class="has-text-centered">
                        <p class="is-size-7"> Already have an account? <a href="login.html" class="has-text-primary">Login
                                </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
      </form>
    </section>
    </main>
    <!-- <script type="module" src="index.js"></script> -->
    <script src="main.js"></script>
</body>
</html>

CSS（保持不变） #

/* Color Variables */
:root {
  --blue: rgb(40,56,144);
  --yellow: rgb(254,213,0);
  --white: rgb(255,255,255);
}

/* page styles */
body
 {
  box-sizing: border-box;
  background-color: rgb(40,56,144);
}

form button {
  background-color: var(--blue) !important;
}

#logBtn {
  background-color: var(--blue) !important;
  color: var(--white) !important;
}

#signBtn {
  background-color: var(--blue) !important;
  color: var(--white) !important;
}

.column .error {
  display: flex;
  justify-content: left;
  color: red;
  margin-top: 6px;
  display: none;
}

.column .error-icon {
  margin-right: 6px;
  font-size: 15px;
  margin-top: 5px;
}

.invalid .error {
  display: flex;
}

修正后的JavaScript #

//variables declaration
const form = document.querySelector('form');
const emailField = form.querySelector('.emailField');
const emailInput = emailField.querySelector('.email');
const usernameField = form.querySelector('.usernameField');
const usernameInput = usernameField.querySelector('.username');
const schoolField = form.querySelector('.schoolField');
const schoolInput = schoolField.querySelector('.schoolID');
const passwordField = form.querySelector('.passwordField');
const passwordInput = passwordField.querySelector('.password');


//Email validation
function checkEmail() {
  const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
  if (!emailPattern.test(emailInput.value)) {
    return emailField.classList.add("invalid"); //Add invalid class to parent container if email is invalid
  }
  emailField.classList.remove("invalid"); //Remove invalid class if email is valid
}

//Calling function on form submit
form.addEventListener('submit', (e) => {
  e.preventDefault(); //Preventing form submit
  checkEmail();
});

关键修改说明 #

1. DOM选择器修正：所有获取输入框的querySelector都加上了.，比如querySelector('.email')，确保正确匹配class属性
2. 正则验证逻辑修复：使用emailPattern.test(emailInput.value)来检测输入值是否符合正则规则，这是正确的正则验证方式
3. 类名添加对象调整：将invalid类添加到emailField（输入框的父容器），匹配CSS中.invalid .error的显示规则，确保错误提示能被触发显示
4. 变量名修正：把emaiPattern改为emailPattern，避免因拼写错误导致正则无法引用

内容的提问来源于stack exchange，提问作者shemjay