jquery验证在远程请求时显示加载GIF

我正在使用jquery验证插件验证表单。我正在使用远程选项检查给定的用户名是否已经存在于数据库中。一切正常，但我想在验证脚本请求服务器时显示正在加载的gif。有没有一个简单的方法来完成这一点，或者我需要编辑插件js文件？不管怎么说，这是代表代码

 rules: {
   user_name: {
       alfanum:true,//custom method to check if alphanumeric
       required: true,
       minlength: 5,
       remote: {url: "checkuser_custom.php",type:"GET",data:{cmd:"check"}}
   }}

所以基本上我想在readystate 2期间显示一个ajax加载gif

---

感谢您的帮助

根据远程参数，它是一个完整的jQuery.ajax设置对象。有关实现的详细信息，请参阅。

您可以添加如下方法：

$.validator.addMethod("fullRemote", function(value, element, params) {      
    if ( this.optional(element) )
            return "dependency-mismatch";

        var previous = this.previousValue(element);
        if (!this.settings.messages[element.name] )
            this.settings.messages[element.name] = {};
        previous.originalMessage = this.settings.messages[element.name].remote;
        this.settings.messages[element.name].remote = previous.message;

        if( params.onStart ) params.onStart(element);

        params = typeof params == "string" && {url:params} || params;

        if ( this.pending[element.name] ) {
            return "pending";
        }
        if ( previous.old === value ) {
            return previous.valid;
        }

        previous.old = value;
        var validator = this;
        this.startRequest(element);
        var data = {};
        data[element.name] = value;
        $.ajax($.extend(true, {
            url: params,
            mode: "abort",
            port: "validate" + element.name,
            dataType: "json",
            data: data,
            success: function(response) {
                validator.settings.messages[element.name].remote = previous.originalMessage;
                var valid = response === true;
                if( params.onFinish ) params.onFinish(element, valid);
                if ( valid ) {
                    var submitted = validator.formSubmitted;
                    validator.prepareElement(element);
                    validator.formSubmitted = submitted;
                    validator.successList.push(element);
                    validator.showErrors();
                } else {
                    var errors = {};
                    var message = response || validator.defaultMessage( element, "remote" );
                    errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
                    validator.showErrors(errors);
                }
                previous.valid = valid;
                validator.stopRequest(element, valid);
            }
        }, params));
        return "pending";
}, "The value you entered is already in use.");

    ...
    rules: {
        email: {
            required: true,
            email: true,
            fullRemote: {
                url: "../emailavailable",
                type: "post",
                onStart: function(e){
                        var loading = $('#ajaxLoading');
                        loading.appendTo($(e).parent());
                        alert($(e).val());
                    },
                onFinish: function(e, valid){
                        var loading = $('#ajaxLoading');
                        loading.remove();
                        return true;
                    }
            }
        }
    },
    messages: {
        email: {
            fullRemote: "email address is already in use."
        }
    },
    ...

然后使用与“远程”几乎相同的方法，如下所示：

$.validator.addMethod("fullRemote", function(value, element, params) {      
    if ( this.optional(element) )
            return "dependency-mismatch";

        var previous = this.previousValue(element);
        if (!this.settings.messages[element.name] )
            this.settings.messages[element.name] = {};
        previous.originalMessage = this.settings.messages[element.name].remote;
        this.settings.messages[element.name].remote = previous.message;

        if( params.onStart ) params.onStart(element);

        params = typeof params == "string" && {url:params} || params;

        if ( this.pending[element.name] ) {
            return "pending";
        }
        if ( previous.old === value ) {
            return previous.valid;
        }

        previous.old = value;
        var validator = this;
        this.startRequest(element);
        var data = {};
        data[element.name] = value;
        $.ajax($.extend(true, {
            url: params,
            mode: "abort",
            port: "validate" + element.name,
            dataType: "json",
            data: data,
            success: function(response) {
                validator.settings.messages[element.name].remote = previous.originalMessage;
                var valid = response === true;
                if( params.onFinish ) params.onFinish(element, valid);
                if ( valid ) {
                    var submitted = validator.formSubmitted;
                    validator.prepareElement(element);
                    validator.formSubmitted = submitted;
                    validator.successList.push(element);
                    validator.showErrors();
                } else {
                    var errors = {};
                    var message = response || validator.defaultMessage( element, "remote" );
                    errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
                    validator.showErrors(errors);
                }
                previous.valid = valid;
                validator.stopRequest(element, valid);
            }
        }, params));
        return "pending";
}, "The value you entered is already in use.");

    ...
    rules: {
        email: {
            required: true,
            email: true,
            fullRemote: {
                url: "../emailavailable",
                type: "post",
                onStart: function(e){
                        var loading = $('#ajaxLoading');
                        loading.appendTo($(e).parent());
                        alert($(e).val());
                    },
                onFinish: function(e, valid){
                        var loading = $('#ajaxLoading');
                        loading.remove();
                        return true;
                    }
            }
        }
    },
    messages: {
        email: {
            fullRemote: "email address is already in use."
        }
    },
    ...

---

Kasper如果scr4ve帮助了您，请勾选他答案旁边的复选标记，表明他有正确的答案我们可以在实现示例中编辑吗？按原样，此答案仅链接到外部源，可以通过添加一个代码段来改进。此方法不可能从升级到远程选项中获益。