如何让基于JQuery的登录表单点击登录按钮后正常生效？

先揪出你原代码里的核心问题，这些就是导致点击没反应、验证混乱的原因：

• 提交按钮没加id="submit"，你用$("#submit")根本选不到元素，点击事件绑不上
• event.preventDefault()里的event没传进回调函数，浏览器会报错，没法阻止表单默认提交
• 用document.write会直接清空整个页面，验证完表单都没了，这完全是错误用法
• 输入框选择器重复又不准确，没法单独处理每个字段的对错状态
• JS代码里直接写HTML标签，语法错误，根本渲染不出图标
• 验证逻辑太粗，没区分空值和输入错误的情况，也没单独验证用户名和密码

下面是修正后的完整代码，完全符合你的需求：

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="login-container">
  <form id="formular" method="post">
    <div class="input-group">
      <label for="username">Username:</label>
      <input id="username" type="text">
      <span class="icon"></span>
      <span class="error-message"></span>
    </div>

    <div class="input-group">
      <label for="password">Password:</label>
      <input id="password" type="password">
      <span class="icon"></span>
      <span class="error-message"></span>
    </div>

    <input type="submit" value="Login" id="submit">
    <div class="login-status"></div>
  </form>
</div>

CSS #

body {
  box-sizing: border-box;
  font-family: sans-serif;
}

#login-container {
  width: 460px;
  margin: 0 auto;
}

form label,
form input {
  width: 100%;
  box-sizing: border-box;
}

form input {
  padding: 8px;
}

form label {
  font-weight: bold;
}

.input-group {
  margin: 16px 0px;
  position: relative;
}

/* 图标样式，适配Material Icons字体 */
.icon {
  position: absolute;
  right: 10px;
  top: 32px;
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: none;
}

.error-message {
  color: red;
  font-size: 12px;
  display: block;
  margin-top: 4px;
}

.login-status {
  margin-top: 12px;
  font-weight: bold;
}

/* 成功/错误状态的统一样式 */
.input-success input {
  border: 2px solid green;
}
.input-success .icon {
  color: green;
  display: block;
}
.input-success .error-message {
  display: none;
}

.input-error input {
  border: 2px solid red;
}
.input-error .icon {
  color: red;
  display: block;
}

JavaScript #

$(document).ready(function() {
  // 监听表单提交（包括点击按钮和回车触发）
  $("#formular").submit(function(event) {
    event.preventDefault(); // 阻止表单默认跳转行为
    
    const username = $("#username").val().trim();
    const password = $("#password").val().trim();
    
    let usernameValid = false;
    let passwordValid = false;

    // 单独验证用户名
    if (username === "") {
      setInputStatus("#username", "error", "请输入用户名");
    } else if (username === "new_user") {
      setInputStatus("#username", "success");
      usernameValid = true;
    } else {
      setInputStatus("#username", "error", "请输入有效的用户名");
    }

    // 单独验证密码
    if (password === "") {
      setInputStatus("#password", "error", "请输入密码");
    } else if (password === "123456789") {
      setInputStatus("#password", "success");
      passwordValid = true;
    } else {
      setInputStatus("#password", "error", "请输入有效的密码");
    }

    // 显示整体登录状态
    if (usernameValid && passwordValid) {
      $(".login-status").text("登录成功！").css("color", "green");
    } else {
      $(".login-status").text("登录失败，请检查输入").css("color", "red");
    }
  });

  // 封装设置输入框状态的函数，减少重复代码
  function setInputStatus(inputSelector, status, message = "") {
    const group = $(inputSelector).closest(".input-group");
    const icon = $(inputSelector).siblings(".icon");
    const errorMsg = $(inputSelector).siblings(".error-message");

    if (status === "success") {
      group.removeClass("input-error").addClass("input-success");
      icon.text("check");
      errorMsg.text("");
    } else {
      group.removeClass("input-success").addClass("input-error");
      icon.text("close");
      errorMsg.text(message);
    }
  }
});

关键修改点说明 #

1. 修复事件绑定：给提交按钮加了id="submit"，同时改用表单的submit事件监听，确保点击按钮和按回车都能触发验证
2. 正确阻止默认行为：把event作为参数传入回调函数，event.preventDefault()能正常工作，不会跳转页面
3. 替换document.write：新增了.error-message和.login-status元素用来展示提示，不会清空页面
4. 单独验证字段：分别处理用户名/密码的空值、错误、正确三种情况，提示更精准
5. 正确渲染图标：通过修改.icon的文本内容显示对勾/叉号，用CSS控制显示和颜色，避免JS里直接写HTML的语法错误
6. 封装重复逻辑：写了setInputStatus函数，减少重复代码，维护更方便

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