Question

我有2个函数被调用onBlur来验证在完成注册过程之前是否注册了用户名或电子邮件。

这些是2个功能

function checkname() {
    jQuery.ajax({
        url: "includes/check_signup.php",
        data:'username='+$("#name").val(),
        type: "POST",
        success:function(data){
            $("#error").html(data);
        },
        error:function (){}
    });
}

function checkemail()
{
    jQuery.ajax({
        url: "includes/check_signup.php",
        data:'email='+$("#email").val(),
        type: "POST",
        success:function(data){
            $("#error").html(data);
        },
        error:function (){}
    });
}

我有一个第三个函数，它在按钮提交时执行，以将用户数据发送到数据库。现在，如果上述任何函数返回“用户名/电子邮件已经注册？”的成功，我怎么能停止执行该函数？

这是第3个功能

 $('#btn-signup').click(function(){
    $.post( 
        $('#register-form').attr('action'),
        $('#register-form :input').serializeArray(),
        function(result){
            $('#result').html(result);
        }
    );
});

Answer 1

使用信号量来控制您想要的流量，假设您有一个包含类result_email和result_name的DOM对象，并且最初都包含.text（）==＆＃34;被阻止＆＃34 ;

$('#btn-signup').click(function() {
    if(!$(".result_email").text() && !$(".result_name").text()) {
        $.post(
            // etc
        );
    } else {
        $("#error").focus();
    }
});

如果任一呼叫成功，意味着用户名或电子邮件已经存在，我们将信号量打开到阻止注册按钮点击事件，但如果再次调用检查方法，则失败，因此名称或电子邮件可以注册，我们从信号量中删除块;

function checkemail() {
    jQuery.ajax({
        url: "includes/check_signup.php",
        data:'email='+$("#email").val(),
        type: "POST",
        success:function(data){
            $(".result_email").text("blocked")
            $("#error").html(data);
        },
        error:function (){
            $(".result_email").text("")
        }
    });
}

function checkname() {
    jQuery.ajax({
        url: "includes/check_signup.php",
        data:'username='+$("#name").val(),
        type: "POST",
        success:function(data){
            $(".result_name").text("blocked")
            $("#error").html(data);
        },
        error:function (){
            $(".result_name").text("")
        }
    });
}

您也可以在JS中使用全局变量，但最好使用DOM元素IMO。

Answer 2

您可以在＆＃39; onBlur＆＃39;上进行2次现场检查。该字段或提交之前，只有添加用户。

$("#name").on("blur",checkname);

在checkName成功中，您还可以设置标志nameValid = true。

你可以这样做

function checkname() {
    jQuery.ajax({
        url: "includes/check_signup.php",
        data:'username='+$("#name").val(),
        type: "POST",
        success:function(data){
            nameValid = false;
        },
        error:function (){
            nameValid = true;
        }
    });
}

同样，你可以给出

$("#email").on("blur",checkemail);

设置emailValid标志。 on blur通常用于在用户单击/输入值并退出字段时调用。

在提交按钮上，您可以检查2个标志，并仅在两个标志都为真时调用。

$('#btn-signup').click(function() {
   if (nameValid && emailValid) { 
      if(!$(".result").text()) {
        $.post( 
            // etc
        );
     } else {
        $("#error").focus();
    }
   }
});

您还可以通过回调链接一起提交2次检查，在第一次检查成功时调用第二次检查并在第二次检查成功时调用提交。但是这个需要更长的等待，太多的嵌套回调（a.k.a回调地狱），最好在用户输入时立即提供内联用户反馈。

Answer 3

这是整个代码：

确保在成功ajax请求返回后替换代码。

我认为0结果可用，否则无法使用

＆＃13;

var isNameAvailable = false;
var isEmailAvailable = false;

function checkname() {
  jQuery.ajax({
    url: "includes/check_signup.php",
    data: 'username=' + $("#name").val(),
    type: "POST",
    success: function(data) {
      $("#error").html(data);

      if (parseInt(data) == 0) {
        isNameAvailable = true;
      } else {
        isNameAvailable = false;
      }
    },
    error: function() {
      console.log("connection error");
      // for test only
      console.log("Demoooo");
      isNameAvailable = true;
    }
  });
}

function checkemail() {
  jQuery.ajax({
    url: "includes/check_signup.php",
    data: 'email=' + $("#email").val(),
    type: "POST",
    success: function(data) {
      $("#error").html(data);

      if (parseInt(data) == 0) {
        isEmailAvailable = true;
      } else {
        isEmailAvailable = false;
      }
    },
    error: function() {
      console.log("connection error");
      // for test only
      console.log("Demoooo");
      isEmailAvailable = true;
    }
  });
}

$('#btn-signup').click(function(event) {
  event.preventDefault();
  if (!isNameAvailable || !isEmailAvailable) {
    console.log("check username and email");
    return;
  }
  console.log("Success ...");
  $.post(
    $('#register-form').attr('action'),
    $('#register-form :input').serializeArray(),
    function(result) {
      $('#result').html(result);
    }
  );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  username: <input type="text" name="name" id="name" onblur="checkname()" />
   email: <input type="text" name="email" id="email" onblur="checkemail()" />
  <br />
  <br />
  <input type="submit" name="submit" id="btn-signup" value="Submit" />
</form>

＆＃13;

根据ajax响应执行一个函数

3 个答案: