Question

我有一个注册表单，提示输入名字，姓氏，用户名，密码和电子邮件地址。我正在使用两个单独的$ .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（）检查用户名和/或电子邮件。我的功能有什么问题，或者我还没有发现什么。感谢。

Answer 1

您需要使用完整的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;
 }

Answer 2

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

Answer 3

在主要功能中，您不能直接等待$.get()返回。但是您可以将表单提交移动到AJAX调用的成功回调（假设form包含对实际表单元素的引用）：

$.get("/account/checkavailabilitybyusername", { username: username },
                    function(data) {
                        if (data == "Not Existing") {
                            $("#check-username").html("");
                            form.submit();
//--------------------------^
                        }
                        else if (data == username) {
                            isError = true;
                            $("#check-username").html("Sorry, this username is already registered");
                        }
                    }
                    );

但请注意，然后表单提交依赖于在AJAX上返回。最有用的是超时（使用window.setTimeout()）和服务器端验证，如果JS没有响应或用户已禁用JS。

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

3 个答案: