输入验证不通过时，如何为禁用的注册按钮添加点击抖动效果

你当前的问题是：当邮箱/密码不匹配时，JS通过setInterval实时禁用了注册按钮，导致用户无法点击按钮触发抖动动画。想要实现用户点击按钮时，若输入有误则触发抖动效果的需求，我们需要调整验证逻辑，具体方案如下：

解决思路 #

核心是放弃“实时禁用按钮”的逻辑，改为按钮始终可点击，在点击时做验证：

• 保留原有的输入框实时验证逻辑，维护mailOK和passOK的状态
• 添加CSS抖动动画
• 给按钮绑定点击事件，点击时检查验证状态：
  • 若验证不通过，触发抖动动画，阻止表单提交
  • 若验证通过，允许表单正常提交

完整实现代码 #

1. 添加CSS抖动动画 #

在<style>标签中添加以下动画样式：

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake-animation {
  animation: shake 0.5s ease-in-out;
}

2. 修改JavaScript逻辑 #

移除原有的setInterval和validateSignup函数，替换为按钮点击事件监听：

let mailOK = false;
let passOK = false;

// 邮箱验证逻辑（保留原有逻辑）
$("#mailSignupInput, #mailConfirmInput").keyup(() => {
  let mail1 = $("#mailSignupInput");
  let mail2 = $("#mailConfirmInput");
  if (!(mail1.val() === mail2.val())) {
    document.getElementById("mailMatch").style.display = "";
    mail1.css({ borderColor: "red", borderWidth: "3px", borderStyle: "solid" });
    mail2.css({ borderColor: "red", borderWidth: "3px", borderStyle: "solid" });
    mailOK = false;
  } else {
    document.getElementById("mailMatch").style.display = "none";
    mail1.css({ borderWidth: "0px" });
    mail2.css({ borderWidth: "0px" });
    mailOK = true;
  }
});

// 密码验证逻辑（保留原有逻辑）
$("#passSignupInput, #passConfirmInput").keyup(() => {
  let pass1 = $("#passSignupInput");
  let pass2 = $("#passConfirmInput");
  if (!(pass1.val() === pass2.val())) {
    document.getElementById("passMatch").style.display = "";
    pass1.css({ borderColor: "red", borderWidth: "3px", borderStyle: "solid" });
    pass2.css({ borderColor: "red", borderWidth: "3px", borderStyle: "solid" });
    passOK = false;
  } else {
    document.getElementById("passMatch").style.display = "none";
    pass1.css({ borderWidth: "0px" });
    pass2.css({ borderWidth: "0px" });
    passOK = true;
  }
});

// 按钮点击事件：验证+抖动效果
$("#submitSignup").click(function(e) {
  // 如果验证不通过
  if (!(mailOK && passOK)) {
    // 添加抖动动画类
    $(this).addClass("shake-animation");
    // 动画结束后移除类，以便下次点击能再次触发
    setTimeout(() => {
      $(this).removeClass("shake-animation");
    }, 500);
    // 阻止表单提交
    e.preventDefault();
  }
  // 验证通过则默认提交表单，无需额外操作
});

3. 完整HTML结构（整合后） #

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
      20%, 40%, 60%, 80% { transform: translateX(5px); }
    }

    .shake-animation {
      animation: shake 0.5s ease-in-out;
    }
  </style>
</head>
<body>
  <form id="signupForm" class="form" action="" method="post">
    <!--Mail Signup Section-->
    <div id="mailDiv">
      <label id="mailLabel" for="mailSignupInput">E-Mail:</label> <br>
      <input id="mailSignupInput" class="textInput" type="text" name="username" placeholder="mail@example.com" autocomplete="off"> <br>
      <br>
      <label id="mailLabel" for="mailConfirmInput">Confirm E-Mail:</label> <br>
      <input id="mailConfirmInput" class="textInput" type="text" name="username" placeholder="mail@example.com" autocomplete="off"> <br>
      <span style="display: none; color: red" id="mailMatch">Email values do not match</span> <br>
      <span style="display: none; color: red" id="mailValid">Email is not valid</span>
    </div>
    <br>
    <!--Password Signup Section-->
    <div id="passDiv">
      <label id="passLabel" for="passSignupInput">Password:</label> <br>
      <input id="passSignupInput" class="textInput" type="password" name="pass" autocomplete="off"> <br>
      <br>
      <label id="passLabel" for="passConfirmInput">Confirm Password:</label> <br>
      <input id="passConfirmInput" class="textInput" type="password" name="pass" autocomplete="off"> <br>
      <span style="display: none; color: red" id="passMatch">Passwords do not match</span>
    </div>
    <br>
    <!--Signup Button Section-->
    <div id="buttonDiv">
      <input id="submitSignup" class="buttonInput" type="submit" value="SIGN-UP">
    </div>
  </form>

  <script>
    let mailOK = false;
    let passOK = false;

    $("#mailSignupInput, #mailConfirmInput").keyup(() => {
      let mail1 = $("#mailSignupInput");
      let mail2 = $("#mailConfirmInput");
      if (!(mail1.val() === mail2.val())) {
        document.getElementById("mailMatch").style.display = "";
        mail1.css({ borderColor: "red", borderWidth: "3px", borderStyle: "solid" });
        mail2.css({ borderColor: "red", borderWidth: "3px", borderStyle: "solid" });
        mailOK = false;
      } else {
        document.getElementById("mailMatch").style.display = "none";
        mail1.css({ borderWidth: "0px" });
        mail2.css({ borderWidth: "0px" });
        mailOK = true;
      }
    });

    $("#passSignupInput, #passConfirmInput").keyup(() => {
      let pass1 = $("#passSignupInput");
      let pass2 = $("#passConfirmInput");
      if (!(pass1.val() === pass2.val())) {
        document.getElementById("passMatch").style.display = "";
        pass1.css({ borderColor: "red", borderWidth: "3px", borderStyle: "solid" });
        pass2.css({ borderColor: "red", borderWidth: "3px", borderStyle: "solid" });
        passOK = false;
      } else {
        document.getElementById("passMatch").style.display = "none";
        pass1.css({ borderWidth: "0px" });
        pass2.css({ borderWidth: "0px" });
        passOK = true;
      }
    });

    $("#submitSignup").click(function(e) {
      if (!(mailOK && passOK)) {
        $(this).addClass("shake-animation");
        setTimeout(() => {
          $(this).removeClass("shake-animation");
        }, 500);
        e.preventDefault();
      }
    });
  </script>
</body>
</html>

关键说明 #

• 移除了实时禁用按钮的逻辑，让按钮始终可点击，这样用户的点击操作能被捕获
• 用CSS @keyframes定义抖动动画，通过添加/移除类来触发
• 点击事件中判断验证状态，不通过时阻止表单提交并触发抖动，通过时正常提交

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