表单验证时高亮输入字段：含@的合法邮箱显绿、非法显红的jQuery代码不生效

现有代码的核心问题 #

• 运行错误阻断逻辑：错误校验分支中遗留了未声明的临时变量vaca（未加var/let/const声明），在JS严格模式下会直接抛出引用错误，导致后续的高亮类添加逻辑完全无法执行，是代码运行后无反馈的核心诱因
• 触发逻辑缺失：当前代码仅在表单提交动作发生时才执行校验，没有绑定输入实时触发的事件，用户输入过程中完全不会出现高亮反馈，无法实现输入即判断的预期效果
• 样式状态未隔离：校验失败时直接添加has-error类，没有预先清除元素上可能存在的has-success类，两个冲突的高亮类同时挂载时会导致样式表现混乱
• 样式作用范围错误：校验通过时直接为表单下所有.form-group元素添加成功样式，会错误标记姓名、留言等其他非邮箱输入项为合法状态，和“仅高亮邮箱输入框”的需求不符

修正后可直接运行的代码实现 #

$(document).ready(function () {
  // 提前缓存DOM元素，减少重复查询开销
  const $email = $("#contact-email");
  const $emailGroup = $email.closest(".form-group");
  const $form = $("#contact form");
  const $submitBtn = $form.find("button[type=submit]");

  // 封装邮箱校验逻辑
  function checkEmailValid() {
    // 每次校验先清空旧的状态类，避免样式冲突
    $emailGroup.removeClass("has-error has-success");
    // 按需求判断：包含@即为合法
    if ($email.val().indexOf("@") === -1) {
      $emailGroup.addClass("has-error");
      return false;
    }
    $emailGroup.addClass("has-success");
    return true;
  }

  // 绑定输入事件，实现实时高亮反馈
  $email.on("input", checkEmailValid);

  // 绑定表单提交事件
  $form.on("submit", function (e) {
    e.preventDefault();
    // 提交前先走校验逻辑
    const isValid = checkEmailValid();
    if (!isValid) return;

    // 校验通过后的提交提示逻辑
    $submitBtn.attr("disabled", "disabled");
    $submitBtn.after("<span>Message sent. We will contact you soon.</span>");
  });
});

注：当前实现严格匹配需求中“包含@即判定为合法”的规则，如果后续需要更严谨的邮箱格式校验，仅需调整checkEmailValid函数内的判断逻辑即可，不影响高亮交互的核心流程。

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