javascript - jQuery表单验证和按钮波纹

我在“AA>”上找到了这个登录表单，所以基本上，当您单击按钮时，它会起到涟漪效应，而我要做的是调整代码，以便在验证用户存在于数据库中之后才执行该代码。
原始代码-

$(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中，变量类型很重要。字符串不等于Int。
尝试使用responseText * 1将字符串转换为Int。然后应该使用缩写来比较它们。
我看到的另一个问题是范围问题。
var that = this;完全取决于何时调用它。
您必须像您提供的代码那样调用它，即在事件函数中而不是在ajax成功回调函数中
有关作用域的详细信息：What is the scope of variables in JavaScript

$(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');
                }
            }
        });
    }
});

关于javascript - jQuery表单验证和按钮波纹，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34204822/