JQuery表单验证&按钮Ripple

Question

我在http://codepen.io/suez/pen/dPqxoM上找到了这个登录表单，所以基本上当您单击该按钮时，它会产生连锁反应，而我要做的是调整代码，使其只在验证了用户是否存在于数据库中之后才起作用。

原守则-

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

  });

提前感谢

Answer 1

我想说你有几个问题。

基本上，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');
                }
            }
        });
    }
});