Question

我正在创建一个通过Jquery表单插件提交的注册表单。我试图通过带有后端php文件的ajax验证表单字段。这是我的Javascript。它只有在我将其设置为返回false时才会起作用，无论它是什么，否则它会在没有验证的情况下提交它，如果我将其返回true。

$(document).ready(function(){
    $(".close_pop").click(function(){
        $("#rc").fadeOut("slow");
    });

    var options = { 
        target:        '.container',
        beforeSubmit: validate    
    }; 
    $('#register_form_id').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options); 
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    });
}); 
function validate(formData, jqForm, options) { 
    var fn = $('input[@name=first_name]').fieldValue(); 
    var ln = $('input[@name=last_name]').fieldValue(); 
    var e = $('input[@name=maile]').fieldValue(); 
    var p = $('input[@name=pass]').fieldValue();
    var url = "/register/validate?first=" + fn + "&last=" + ln + "&email=" + e + "&pass=" + p; 
    if (!fn[0]) { 
        $("#fn").focus();
        $(".error").fadeIn("slow");
        $(".error").html("Please enter your first name.");
        return false;
    }
    if (!ln[0]) { 
        $("#ln").focus();
        $(".error").fadeIn("slow");
        $(".error").html("Please enter your last name.");
        return false;
    }
    if (!e[0]) { 
        $("#e").focus();
        $(".error").fadeIn("slow");
        $(".error").html("Please enter a valid email address (e.g. name@domain.com.)");
        return false;
    }
    if (!p[0]) { 
        $("#p").focus();
        $(".error").fadeIn("slow");
        $(".error").html("Please enter a valid password (It must be at least 6 characters.)");
        return false;
    }       
     $.get(url , 
        function(data){
        if(data == 'ng') {
            $(".error").fadeIn("slow");
            $(".error").html("We are experiencing technical issues. Please try again later.");
            return false;
        } else if(data == 'f') {
            $("#fn").focus();
            $(".error").fadeIn("slow");
            $(".error").html("Please enter your first name.");
            return false;
        } else if(data == 'l') {
            $("#ln").focus();
            $(".error").fadeIn("slow");
            $(".error").html("Please enter your last name.");
            return false;
        } else if(data == 'e') {
            $("#e").focus();
            $(".error").fadeIn("slow");
            $(".error").html("Please enter a valid email address (e.g. name@domain.com.)");
            return false;
        } else if(data == 'e_u') {
            $("#e").focus();
            $(".error").fadeIn("slow");
            $(".error").html("This email address appears to be registered.");
            alert(data);
            return false;
        } else if(data == 'p') {
            $("#p").focus();
            $(".error").fadeIn("slow");
            $(".error").html("Please enter a valid password (It must be at least 6 characters.)");
            return false;
        } else if(data == 'y') {
            return true;
        } else {
            return false;
        }
      });
      return false;
}

如果遇到问题，那么php文件会回复某些关键字或字母。如果它顺利运行它回声'y'。

正如我上面所说，我需要它在数据等于y时返回true，但事实并非如此。它验证的唯一方法是，如果我保留第二行到最后一行“return false;”否则它提交过我的php后端。我没有遇到if（！var [0]）{的任何问题函数，这不是一个问题。

有什么建议吗？

Answer 1

您可以查看jQuery Validator plugin，它为您提供了许多验证选项，包括AJAX调用。

Answer 2

这是因为您使用validate函数就好像它是同步操作一样。但是.get方法是异步的，这意味着函数不会等待xhr方法返回，而是总是会丢失并返回false。您可以使用.ajax方法调用并将其标记为异步：false然而这是不好的，因为它为用户锁定了ui，并且如果由于某种原因xhr无法返回，则客户端浏览器将无效，除非您取消通过xhr超时调用 - 但这种方法不是我建议的。

因为没法尝试validate plugin。作者提到complexities of of synchronus ajax validation以及插件如何帮助您避免担心它。

Ajax有助于缩小差距，但是在表单上同步验证提交并不是一件容易的事。该验证插件使它变得简单作为纯客户端验证。所有您需要做的是指定规则 “远程”为一个字段并提供一个指向服务器端的参数处理验证的资源。

Jquery表单插件（添加ajax表单验证）

2 个答案: