Javascript 我可以在提交表单之前等待$.get（）调用吗？

我有一张报名表，提示输入名字、姓氏、用户名、密码和电子邮件地址。我使用两个单独的$.get（）方法检查用户名和电子邮件地址是否不存在

这是我的职责：

 function validateSignUp() {
        var firstName = $("#first-name").val();
        var lastName = $("#last-name").val();
        var username = $("#username").val();
        var password = $("#pass").val();
        var email = $("#email").val();
        var passwordVerifier = $("#retype-pass").val();
        var emailVerifier = $("#retype-email").val();

        errorMessage = "";
        var isUsernameValid = validateUsername(username);

        var isError = false;

        // validate first name field
        if (firstName == "" || lastName == "") {
            isError = true;
            $("#error-message").html("All fields are required");
        }

        // validate password
        if (validatePassword(password) == false) {
            isError = true;
            $("#check-password").html("Password is invalid");
        }
        else {
            $("#check-password").html("");
        }

        // validate password verifier
        if (passwordVerifier == password) {
            if (validatePassword(passwordVerifier) == false) {
                isError = true;
                $("#recheck-password").html("Minimum of 6 characters and maximum of 30 characters");
            }
            else {
                if (password != passwordVerifier) {
                    isError = true;
                    $("#recheck-password").html("Minimum of 6 characters and maximum of 30 characters ");
                }
                else {
                    $("#recheck-password").html("");
                }
            }
        }
        else {
            isError = true;
            $("#recheck-password").html("Passwords didn't match");
        }

        // validate username field
        if (isUsernameValid == false) {
            isError = true;
            $("#check-username").html("Alphanumeric characters only");
        } // if
        else if (isUsernameValid == true) {
            $.get("/account/checkavailabilitybyusername", { username: username },
                    function(data) {
                        if (data == "Not Existing") {
                            $("#check-username").html("");
                        }
                        else if (data == username) {
                            isError = true;
                            $("#check-username").html("Sorry, this username is already registered");
                        }
                    }
                    );
        } // else
        // validate e-mail address field

        if (validateEmail(email) == false) {
            isError = true;
            $("#check-email").html("Sorry, the e-mail you typed is invalid");
        } // if
        else if (validateEmail(email) == true) {
        $.get("/account/checkavailabilitybyemail", { email: email },
                    function(data) {
        if (data == "Not Existing") {
                            $("#check-email").html("");
                        }
                        else if (data == email) {
                        isError = true;
                            $("#check-email").html("Sorry, this e-mail is already registered");
                        }
                    });
                }
                if (isError == true) {
                    return false;
                }
        return true;
   }

---

如果其他字段为空且用户名和/或电子邮件地址存在，则不提交表单。并且还调用了get方法的回调函数。但是，当我要提交没有空字段的表单时，它会自动提交，而无需通过$.get（）检查用户名和/或电子邮件。我的功能有什么问题吗，或者我还没有发现什么。谢谢。

在主函数中，您不能直接等待

$.get（）

返回。但是您可以将表单提交移动到AJAX调用的成功回调（假设

form

包含对实际表单元素的引用）：

---

但是请注意，表单提交依赖于AJAX返回。如果JS没有响应或用户禁用了JS，最有用的是超时（使用

window.setTimeout（）

）和服务器端验证。

在主函数中，您不能直接等待

$.get（）

返回。但是您可以将表单提交移动到AJAX调用的成功回调（假设

form

包含对实际表单元素的引用）：

---

但是请注意，表单提交依赖于AJAX返回。如果JS没有响应或用户禁用了JS，最有用的是超时（使用

window.setTimeout（）

）和服务器端验证。

您需要使用完整的

ajax（）

调用，并将

async

属性设置为

false

。这会使您的请求同步，即强制浏览器等待，直到执行其他操作。试试这个：

 $.ajax({
     url: "/account/checkavailabilitybyemail",
     data: { email: email },
     async: false,
     success: function(data) {
         if (data == "Not Existing") {
             $("#check-email").html("");
         } else if (data == email) {
             isError = true;
             $("#check-email").html("Sorry, this e-mail is already registered");
         }
     })
 });

 if (isError == true) {
      return false;
 }

---

您需要使用完整的

ajax（）

调用，并将

async

属性设置为

false

。这会使您的请求同步，即强制浏览器等待，直到执行其他操作。试试这个：

 $.ajax({
     url: "/account/checkavailabilitybyemail",
     data: { email: email },
     async: false,
     success: function(data) {
         if (data == "Not Existing") {
             $("#check-email").html("");
         } else if (data == email) {
             isError = true;
             $("#check-email").html("Sorry, this e-mail is already registered");
         }
     })
 });

 if (isError == true) {
      return false;
 }

---

我建议您利用jqueryvalidate和两个远程规则。它很容易实现，而且是一个非常成熟的插件。通过这种方式，您可以专注于UX的其他方面，而不必在需要验证项目中的另一个表单时重新实现此验证逻辑。

我建议您利用Jquery验证和两个远程规则。它很容易实现，而且是一个非常成熟的插件。这样，如果需要验证项目中的另一个表单，您可以专注于UX的其他方面，而不必重新实现此验证逻辑。

并在检查期间冻结整个用户界面。非常感谢。永远不要，永远不要进行同步调用。这是我的座右铭，我显然不是唯一一个持这种观点的人。@Boldewyn，不客气。冻结页面（而不是浏览器）不到半秒钟对我来说似乎没有问题-此请求所需时间应该不会超过半秒钟。您至少可以在FF<3.0中冻结UI。在不可预见的情况下，请求可能会花费更长的时间，例如您无法掌握的DNS问题。即使它只阻塞当前选项卡：如果请求冻结，用户也无法在您的页面上执行任何操作。它对任何点击都没有反应，用户觉得这看起来像是页面上的一个错误。在这个酷网站的注册页面上呢？我不认为这是个好主意。我同意你说的有道理，但作为最后的手段，你可以为通话设置一个较低的超时，这样它就不会无限期冻结。这对异步调用也有好处，因为如果请求的时间比预期的长，用户仍然会认为页面上有错误，而不管同步性如何。并且在检查期间冻结整个用户界面。非常感谢。永远不要，永远不要进行同步调用。这是我的座右铭，我显然不是唯一一个持这种观点的人。@Boldewyn，不客气。冻结页面（而不是浏览器）不到半秒钟对我来说似乎没有问题-此请求所需时间应该不会超过半秒钟。您至少可以在FF<3.0中冻结UI。在不可预见的情况下，请求可能会花费更长的时间，例如您无法掌握的DNS问题。即使它只阻塞当前选项卡：如果请求冻结，用户也无法在您的页面上执行任何操作。它对任何点击都没有反应，用户觉得这看起来像是页面上的一个错误。在这个酷网站的注册页面上呢？我不认为这是个好主意。我同意你说的有道理，但作为最后的手段，你可以为通话设置一个较低的超时，这样它就不会无限期冻结。这对于异步调用也有好处，因为如果请求花费的时间比预期的要长，用户仍然会认为页面上有错误，而不管同步性如何。