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

Question

我在 http://codepen.io/suez/pen/dPqxoM 上找到了这个登录表单, 所以基本上当你点击按钮时它会产生链式 react 而我想要做的是调整代码以便它只有在验证用户存在于数据库中后才会产生效果。

原始代码-

$(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 是一个String。因此，当您检查 if (responseText == 0) 和 if (responseText == 1) 它根本不匹配。 p>

在 JavaScript 中，变量类型很重要。 String 不等于 Int。

尝试使用 responseText * 1 将您的 String 转换为 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');
                }
            }
        });
    }
});