jQuery中邮箱有效性校验触发对应弹窗失效问题的解决方法

问题根源 #

1. 未获取输入值：代码里的valueToTest完全没定义，没从输入框拿到用户输入的邮箱内容，直接导致校验逻辑失效
2. 逻辑顺序搞反：你在页面加载阶段就执行了if/else，但此时按钮还没绑定点击事件——正确逻辑应该是点击按钮时才校验邮箱格式，再根据结果显示对应弹窗
3. 类名选择器错误：.3x这类以数字开头的类名，jQuery直接用.3x会解析出错，要么转义要么换规范类名更稳妥

修复后的完整代码 #

HTML部分（调整类名，补充弹窗元素） #

<input name="email" class="form-control input-email" type="email" placeholder="Enter your email" required>
<button type="button" class="btn btn_100 btn-register">Register</button>

<!-- 弹窗元素，默认隐藏 -->
<div class="success-modal" style="display:none;">注册成功</div>
<div class="error-modal" style="display:none;">邮箱格式错误或为空</div>

JavaScript部分（修正逻辑，正确校验） #

$(document).ready(function(){
  // 邮箱正则校验规则
  const testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
  
  // 绑定按钮点击事件
  $(".btn-register").click(function(){
    // 获取输入框的邮箱值，去除首尾空格
    const emailValue = $(".input-email").val().trim();
    
    // 先判断空值，再校验格式
    if(emailValue === ""){
      $(".error-modal").css("display", "block");
      $(".success-modal").css("display", "none");
    } else if(testEmail.test(emailValue)){
      $(".success-modal").css("display", "block");
      $(".error-modal").css("display", "none");
      // 添加注册成功样式（需自行定义.input-success的CSS）
      $(".input-email").addClass("input-success").removeClass("input-error");
    } else {
      $(".error-modal").css("display", "block");
      $(".success-modal").css("display", "none");
      // 添加错误样式（需自行定义.input-error的CSS）
      $(".input-email").addClass("input-error").removeClass("input-success");
    }
  });
});

关键修改说明 #

• 所有逻辑放在$(document).ready()里，确保DOM加载完成后再绑定事件
• 点击按钮时才获取输入值并校验，而非页面加载时就执行判断
• 替换以数字开头的类名，避免jQuery选择器解析问题
• 补充空值判断，满足“邮箱为空时打开错误弹窗”的需求
• 增加样式切换逻辑，符合“添加样式”的要求

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