javascript - JQuery:为什么是空的？

Question

这个问题已经有答案了:

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference (7 个回答)

已关闭 7 年前。

我正在创建一个表单，我想实时验证它。在 ajax 调用中一切正常，但我对返回有问题。这是代码:

function checkEmail() {
    var reg_exp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]{2,})+\.)+([a-zA-Z0-9]{2,})+$/;
    var mail = $("#email").val();
    if (!reg_exp.test(mail) || (mail === "") || (mail === "undefined")) {
        $("#mail_mess").html("Enter a valid email address");
        return false;
    }
    else {
        var r = '';
        $.ajax({
            type: "POST",
            url: "index.php?p=jsform&ajaxcall=checkEmail",
            data: {'mail':mail},
            dataType: 'json',
            success: function(res) { 
                r = res;
                if(res) {
                    $("#mail_mess").html("OK");
                    //return true;
                }
                 else {
                    $("#mail_mess").html("Email already Exists!");
                    //return false;
                }
            }            
        });
        //alert(r);
        return r;
    }
}

$("#email").on("input", function() {
    checkEmail();
}); 

$("#submitButton").click(function() {
    if(... && checkEmail()) {
        sendForm();
    }
    else {
        $("#form_message").html("<span class='error'>All fields are required</span>");
    }

});

如您所见，我在输入更改(用于实时验证)和提交(发送数据之前检查所有字段)时调用函数 checkEmail()。函数 checkEmail() 对于无效电子邮件或已存在的电子邮件应返回 false，对于有效且不存在的电子邮件应返回 true。

现在..该函数可以进行实时验证，我可以在我想要的时候得到“无效”、“已存在”或“有效”。问题在于返回，因为当我返回 r 时，它是一个空字符串(似乎 r = res 不起作用)。如果我尝试取消注释 if(res)/else 内的返回，它们也不起作用。

我很抱歉我的英语不好!感谢您的帮助:-)

Answer 1

checkMail 应该接受一个可选的回调，并使用结果调用它(如果已定义)

function checkEmail(callback) {
    var reg_exp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]{2,})+\.)+([a-zA-Z0-9]{2,})+$/;
    var mail = $("#email").val();
    if (!reg_exp.test(mail) || (mail === "") || (mail === "undefined")) {
        $("#mail_mess").html("Enter a valid email address");
        if(callback) {
            callback(false);
        }
    }
    else {
        $.ajax({
            type: "POST",
            url: "index.php?p=jsform&ajaxcall=checkEmail",
            data: {'mail':mail},
            dataType: 'json',
            success: function(res) { 
                if(res) {
                    $("#mail_mess").html("OK");
                    //return true;
                }
                 else {
                    $("#mail_mess").html("Email already Exists!");
                    //return false;
                }
                if(callback) {
                    callback(res);
                }
            }            
        });
    }
}

这里不需要回调函数

$("#email").on("input", function() {
    checkEmail();
}); 

定义失败函数以避免重复，因为现在有两个“错误”路径

$("#submitButton").click(function() {
    function fail() {
        $("#form_message").html("<span class='error'>All fields are required</span>");
    }
    if(...) {
        checkEmail(function(r) {
            if (r) {
                sendForm();
            }
            else {
                fail()
            });
    else {
        fail();
    }
});