表单验证函数返回值异常：点击事件无法依据验证结果执行

嘿，你遇到的问题其实是对jQuery事件绑定的返回值理解有误，我来帮你拆解并给出解决方案：

问题根源 #

你把keyup事件处理函数赋值给了变量a，但实际上$('#email').keyup(function(){...})返回的是jQuery元素对象（也就是$('#email')本身），而不是函数内部返回的true或false。所以你后续判断a === true完全不会触发预期的逻辑，因为a根本不是布尔值。

解决方案1：抽离独立的邮箱验证函数（推荐） #

把验证逻辑单独写成一个可复用的函数，这样既可以在keyup事件里调用更新样式，也能在点击事件里直接获取验证结果，代码更清晰易维护：

// 抽离独立的邮箱验证函数
function validateEmail() {
  const emailVal = $('#email').val();
  const emailRegexp = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/;
  const isValid = emailRegexp.test(emailVal);
  
  // 根据验证结果更新元素样式和提示
  if (isValid) {
    $('#email').addClass('correct').removeClass('error');
    $('.email-error').html("");
  } else {
    $('#email').addClass('error').removeClass('correct');
    $('.email-error').html("Invalid e-mail");
  }
  
  return isValid;
}

// 给邮箱输入框绑定keyup事件，实时验证
$('#email').keyup(validateEmail);

// 点击事件中调用验证函数获取结果
$(document).ready(function(){
  $('#next1').click(function(){
    const isEmailValid = validateEmail();
    if (isEmailValid) {
      $('.first-nav').css({ 
        "color":"white", 
        "background-color":"rgba(133,179,181,1)"
      });
    } else {
      $('.first-nav').css({ 
        "color":"white", 
        "background-color":"red"
      });
    }
  });
});

解决方案2：通过元素的class属性判断（符合你的初始思路） #

如果你更倾向于用你最初考虑的方式，直接检查#email元素的class来判断验证状态也是可行的，注意要确保class的互斥性：

// 保留原有的keyup事件绑定，确保class正确切换
$('#email').keyup(function(){ 
  const emailRegexp = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/; 
  if (emailRegexp.test($('#email').val())) { 
    $('#email').addClass('correct').removeClass('error'); 
    $('.email-error').html(""); 
  } else { 
    $('#email').addClass('error').removeClass('correct'); 
    $('.email-error').html("Invalid e-mail"); 
  } 
});

// 点击事件中检查class状态
$(document).ready(function(){
  $('#next1').click(function(){
    if ($('#email').hasClass('correct')) {
      $('.first-nav').css({ 
        "color":"white", 
        "background-color":"rgba(133,179,181,1)"
      });
    } else {
      $('.first-nav').css({ 
        "color":"white", 
        "background-color":"red"
      });
    }
  });
});

小提醒 #

• 操作class时记得同时移除对立的类（比如加correct就去掉error），避免样式冲突；
• 抽离独立函数的方式更推荐，因为后续如果需要在表单提交等其他场景验证邮箱，可以直接复用这个函数，不用重复编写逻辑。

内容的提问来源于stack exchange，提问作者Neagu Claudiu Alexandru