Javascript JQuery表单验证&；按钮波纹

我发现这个登录表单是打开的，所以基本上，当你点击按钮时，它会产生连锁反应，而我试图做的是调整代码，使其只有在验证用户存在于数据库中后才会产生效果

原代码-

$(document).on("click", ".login_facebook", function(e) {
if (animating) return;
animating = true;
var that = this;
ripple($(that), e);
$(that).addClass("processing");
setTimeout(function() {
  $(that).addClass("success");
  setTimeout(function() {
    window.location = 'home.html';
  }, submitPhase2 - 70);
  setTimeout(function() {
    $login.hide();
    $login.addClass("inactive");
    animating = false;
    $(that).removeClass("success processing");
  }, submitPhase2);
}, submitPhase1);
});

我的代码改变了

$(document).on("click", ".login__submit", function(e) {
var username = $("#username").val();
var password = $("#password").val();

if( username ==''){
  $('.login__row:eq(0)').css("border","2px solid red");
  $('.login__row:eq(0)').css("box-shadow","0 0 3px red");
  $('.message').show("fast");

}
else
  if(password == '')
  {
    $('.login__row:eq(1)').css("border","2px solid red");
    $('.login__row:eq(1)').css("box-shadow","0 0 3px red");
    $('.message').show("fast");
  }

  if(username != "" && password != "")
  {
    var UrlToPass = 'action=login&username='+username+'&password='+password;
    $.ajax({ // Send the credential values to another checker.php using Ajax in POST menthod
    type : 'POST',
    data : UrlToPass,
    url  : 'login.php',
    success: function(responseText){ // Get the result and asign to each cases
      if(responseText == 0){
        $('.login__row').css("border","2px solid yellow");
        $('.login__row').css("box-shadow","0 0 3px yellow");

      }
      else if(responseText == 1)
      {
            if (animating) return;
            animating = true;
            var that = this;
            ripple($(that), e);
            $(that).addClass("processing");
            setTimeout(function() {
              $(that).addClass("success");
              setTimeout(function() {
                window.location = 'home.html';
              }, submitPhase2 - 70);
              setTimeout(function() {
                $login.hide();
                $login.addClass("inactive");
                animating = false;
                $(that).removeClass("success processing");
              }, submitPhase2);
            }, submitPhase1);            
      }
      else{
      alert('Problem with sql query');
    }
  }
  });
  }

  });

---

提前谢谢

我想说你有几个问题

基本上，

responseText

是一个字符串。 因此，当您检查

if（responseText==0）

和

if（responseText==1）

时，它根本不匹配

在JavaScript中，变量类型很重要。字符串不等于整数。

尝试使用

responseText*1

将字符串转换为Int。然后您应该使用abble来比较它们

---

我看到的另一个问题是范围问题。

var=this完全取决于调用它的时间

您必须以与提供的代码相同的方式调用它，即在事件函数中而不是在ajax成功回调函数中

有关范围的更多信息：


我有过一些使用codepen.io的经验。我有过一些时候他们什么都没做过，有些时候是真的，非常感谢，它成功了。我对JQuery还是新手，所以我对scope变量不太了解。但是谢谢！
$(document).on("click", ".login__submit", function(e) {
    var that = this; // scope issue solved

    var username = $("#username").val();
    var password = $("#password").val();

    if( username =='') {
        $('.login__row:eq(0)').css("border","2px solid red");
        $('.login__row:eq(0)').css("box-shadow","0 0 3px red");
        $('.message').show("fast");
    } else if(password == '') {
        $('.login__row:eq(1)').css("border","2px solid red");
        $('.login__row:eq(1)').css("box-shadow","0 0 3px red");
        $('.message').show("fast");
    }

    if(username != "" && password != "") {
        var UrlToPass = 'action=login&username='+username+'&password='+password;
        $.ajax({
            type : 'POST',
            data : UrlToPass,
            url  : 'login.php',
            success: function(responseText) {
                if(responseText * 1 === 0) { // comparison issue solved
                    $('.login__row').css("border","2px solid yellow");
                    $('.login__row').css("box-shadow","0 0 3px yellow");
                } else if(responseText * 1 === 1) { // comparison issue solved
                    if (animating) return;
                    animating = true;

                    ripple($(that), e);
                    $(that).addClass("processing");
                    setTimeout(function() {
                        $(that).addClass("success");
                        setTimeout(function() {
                            window.location = 'home.html';
                        }, submitPhase2 - 70);
                        setTimeout(function() {
                            $login.hide();
                            $login.addClass("inactive");
                            animating = false;
                            $(that).removeClass("success processing");
                        }, submitPhase2);
                    }, submitPhase1);            
                } else {
                    alert('Problem with sql query');
                }
            }
        });
    }
});