Javascript 如何在检查用户名和电子邮件是否存在后禁用提交按钮

使用AJAX，我检查数据库中是否存在电子邮件或用户名。我想禁用提交按钮，如果其中一个（或两个）存在

现在，我设法给输入边框上色，但我仍停留在禁用按钮的逻辑上

我使用以下命令禁用“提交”按钮：

document.getElementById("submit").disabled = true;

我应该在哪里应用什么逻辑来禁用按钮

$(function() {
  $("#username").on("change", function() {
    var user = document.forms["reg_form"]["username"].value;
    $.ajax({
      type: 'POST',
      url: 'api/checkdata.php',
      data: {user: user},
      dataType: 'json',
      success: function(r) {
        if(r=="1") {
          //Exists
          $("#username").css("border-color", "#ff0000");
        } else {
          //Doesn't exist
          $("#username").css("border-color", "#2cbc21");
        }
      }
    });
  });

  $("#email").on("change", function() {
    var email = document.forms["reg_form"]["email"].value;
    $.ajax({
      type: 'POST',
      url: 'api/checkdata.php',
      data: {email: email},
      dataType: 'json',
      success: function(r) {
        if(r=="1") {
          //Exists
          $("#email").css("border-color", "#ff0000");
        } else {
          //Doesn't exist
          $("#email").css("border-color", "#2cbc21");
        }
      }
    });
  });
});

---

简单地说，当您从服务器得到显示用户名或电子邮件存在的结果时，您将禁用提交按钮 以及：

$(function () {
  $('#username').on('change', function () {
    var user = document.forms['reg_form']['username'].value;
    $.ajax({
      type: 'POST',
      url: 'api/checkdata.php',
      data: {user: user},
      dataType: 'json',
      success: function (r) {
        if (r == '1') {
          // Exists
          $('#username').css('border-color', '#ff0000');
          $('#submit').addAttr('disabled');
          isValid=false;
        } else{
          // Doesn't exist
          $('#username').css('border-color', '#2cbc21');
          $('#submit').addAttr('disabled');
          isValid=true;
        }
      }
    });
  });

  $('#email').on('change', function () {
    var email = document.forms['reg_form']['email'].value;
    $.ajax({
      type: 'POST',
      url: 'api/checkdata.php',
      data: {email: email},
      dataType: 'json',
      success: function (r) {
        if (r == '1') {
          // Exists
          $('#email').css('border-color', '#ff0000');
          $('#submit').addAttr('disabled');
          isValid=false;
        } else {
          // Doesn't exist
          $('#email').css('border-color', '#2cbc21');
          $('#submit').removeAttr('disabled');
          isValid=true;
        }
      }
    });
  });
});

$("#submit").on('click',function(){
  if (isValid){
    //here you can submit form and both username and email dosenot exists
  }
});

---

如果电子邮件不存在，则不使用isValid变量，但用户名exist isValid将为false，并且表单将不会提交

您可以使用

.attr（“禁用”，true）执行此操作

然后使用

$（“#提交”）启用它。removeAttr（“禁用”）尝试以下操作：

        $(function() {

        $("#username").on("change", function() {

            var user = document.forms["reg_form"]["username"].value;

            $.ajax({
                type: 'POST',
                url: 'api/checkdata.php',
                data: {user: user},
                dataType: 'json',
                success: function(r)
                {
                    if(r=="1")
                    {
                        //Exists
                        $("#username").css("border-color", "#ff0000");
                        //disable button using prop
                       $("#submit").attr("disabled", true);
                    }else{
                        //Doesn't exist
                        $("#username").css("border-color", "#2cbc21");
                        // remove disabled
                        $("#submit").removeAttr("disabled");
                    }
                }
            });

        });

        $("#email").on("change", function() {

            var email = document.forms["reg_form"]["email"].value;

            $.ajax({
                type: 'POST',
                url: 'api/checkdata.php',
                data: {email: email},
                dataType: 'json',
                success: function(r)
                {
                    if(r=="1")
                    {
                        //Exists
                        $("#email").css("border-color", "#ff0000");
                         //disable button using prop
                        $("#submit").attr("disabled", true);
                    }else{
                        //Doesn't exist
                        $("#email").css("border-color", "#2cbc21");
                        // remove disabled
                        $("#submit").removeAttr("disabled");
                    }
                }
            });

    });

    });

如果我正确理解了您的问题，您希望在设置禁用样式的同时更改为禁用状态。将该行放在调用.css（）之前或之后。
您可以按如下方式添加按钮禁用启用逻辑。如果用户名或电子邮件存在，则应启用，否则禁用

$(function() {

$("#username").on("change", function() {

    var user = document.forms["reg_form"]["username"].value;

    $.ajax({
        type: 'POST',
        url: 'api/checkdata.php',
        data: {user: user},
        dataType: 'json',
        success: function(r)
        {
            if(r=="1")
            {
                //Exists
                $("#username").css("border-color", "#ff0000");
                document.getElementById("submit").disabled = true;
            }else{
                //Doesn't exist
                $("#username").css("border-color", "#2cbc21");
                document.getElementById("submit").disabled = false;
            }
        }
    });

});

$("#email").on("change", function() {

    var email = document.forms["reg_form"]["email"].value;

    $.ajax({
        type: 'POST',
        url: 'api/checkdata.php',
        data: {email: email},
        dataType: 'json',
        success: function(r)
        {
            if(r=="1")
            {
                //Exists
                $("#email").css("border-color", "#ff0000");
                document.getElementById("submit").disabled = true;
            }else{
                //Doesn't exist
                $("#email").css("border-color", "#2cbc21");
                document.getElementById("submit").disabled = false;
            }
        }
    });

}))

}))
 是的，但是当用户名/电子邮件更改时，它将保持禁用状态。如果在else中添加disabled=false，则会导致其他问题，例如如果用户名无效从而禁用按钮，则在检查电子邮件且该电子邮件有效时，会启用该按钮，但是，当用户名仍然不可用时，它将被启用valid@Andreas如果电子邮件或用户名不存在，请允许我编辑我的答案以重新启用按钮谢谢编辑。我正在从下面粘贴我的评论：我已经尝试过了，不幸的是没有用。在这种情况下，如果用户名无效，它将按预期禁用按钮。但是，如果用户名没有更改，并且电子邮件正确，它将启用按钮，这是由于用户名仍然无效而没有预料到的。@Farhad Welcome buddy:）我已经尝试过了，但不幸的是没有成功。在这种情况下，如果用户名无效，它将按预期禁用按钮。但是，如果用户名没有更改，并且电子邮件是正确的，它将启用该按钮，因为用户名仍然无效。
$(function() {

$("#username").on("change", function() {

    var user = document.forms["reg_form"]["username"].value;

    $.ajax({
        type: 'POST',
        url: 'api/checkdata.php',
        data: {user: user},
        dataType: 'json',
        success: function(r)
        {
            if(r=="1")
            {
                //Exists
                $("#username").css("border-color", "#ff0000");
                document.getElementById("submit").disabled = true;
            }else{
                //Doesn't exist
                $("#username").css("border-color", "#2cbc21");
                document.getElementById("submit").disabled = false;
            }
        }
    });

});

$("#email").on("change", function() {

    var email = document.forms["reg_form"]["email"].value;

    $.ajax({
        type: 'POST',
        url: 'api/checkdata.php',
        data: {email: email},
        dataType: 'json',
        success: function(r)
        {
            if(r=="1")
            {
                //Exists
                $("#email").css("border-color", "#ff0000");
                document.getElementById("submit").disabled = true;
            }else{
                //Doesn't exist
                $("#email").css("border-color", "#2cbc21");
                document.getElementById("submit").disabled = false;
            }
        }
    });