jquery-validate remote 远程校验返回非boolean类型处理

文档地址：http://www.runoob.com/jquery/jquery-plugin-validate.html

关于处理远程校验处理返回非boolean值的处理

在表单校验的时候经常用到验证码，验证码返回的结果有好多种，如：过期，错误等不同类型的错误，这个时候用boolean就不能处理该问题，这个时候就需要查看源代码，修改方法获取支持。

通过查看源代码加断点调试就会发现，remote会调用下面方法进行验证

jquery-validate.js

remote: function( value, element, param ) {
   if ( this.optional( element ) ) {
      return "dependency-mismatch";
   }

   var previous = this.previousValue( element ),
      validator, data;

   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;

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

   if ( previous.old === value ) {
      return previous.valid;
   }

   previous.old = value;
   validator = this;
   this.startRequest( element );
   data = {};
   data[ element.name ] = value;
   $.ajax( $.extend( true, {
      mode: "abort",
      port: "validate" + element.name,
      dataType: "json",
      data: data,
      context: validator.currentForm,
      success: function( response ) {
         var valid = response === true || response === "true",
            errors, message, submitted;

         validator.settings.messages[ element.name ].remote = previous.originalMessage;
         if ( valid ) {
            submitted = validator.formSubmitted;
            validator.prepareElement( element );
            validator.formSubmitted = submitted;
            validator.successList.push( element );
            delete validator.invalid[ element.name ];
            validator.showErrors();
         } else {
            errors = {};
            message = response || validator.defaultMessage( element, "remote" );
            errors[ element.name ] = previous.message = $.isFunction( message ) ? message( value ) : message;
            validator.invalid[ element.name ] = true;
            validator.showErrors( errors );
         }
         previous.valid = valid;
         validator.stopRequest( element, valid );
      }
   }, param ) );
   return "pending";
}

这个时候通过各种调试进行必要的修改，通过看代码会发现ajax success方法 有 

var valid = response === true || response === "true", 

1.获取结果是否是boolean的，如果只是涉及返回的结果在后台有做处理只做显示的话，只需要修改下面代码，因为我返回的信息是 {"ret":1,"msg":"验证码已过期！","err":2000}，所以我会直接用 response.msg 这个

message = response || validator.defaultMessage( element, "remote" );

改为

message = response.msg || validator.defaultMessage( element, "remote" );

2.我这边因为用到手机号获取验证码，还得校验手机号是否是正确的，这个时候在验证验证码之前需要对手机号进行验证，正确了才会去验证验证码所以还得需要修改代码

if (!this.element("#phone1")) {
                return true;
            } else {
                var checkElement = this.validationTargetFor( this.clean( element ) );
                this.prepareElement( checkElement );
                this.currentElements = $( checkElement );
            }

这句是验证手机号是否是正确的，因为验证手机号后校验元素会变成phone1，这个可以通过调试看this.validElements()这个方法就清楚，所以else是将校验的元素改为验证码元素，不然后面验证通过验证样式可能有问题

/**
     * 修改验证码远程验证返回非false处理
     */
    jQuery.extend( jQuery.validator.methods, {

        // http://jqueryvalidation.org/remote-method/
        remote: function( value, element, param ) {

            if (!this.element("#phone1")) {
                return true;
            } else {
                var checkElement = this.validationTargetFor( this.clean( element ) );
                this.prepareElement( checkElement );
                this.currentElements = $( checkElement );
            }

            if ( this.optional( element ) ) {
                return "dependency-mismatch";
            }

            var previous = this.previousValue( element ),
                validator, data;

            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;

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

            if ( previous.old === value ) {
                return previous.valid;
            }

            previous.old = value;
            validator = this;
            this.startRequest( element );
            data = {};
            data[ element.name ] = value;
            $.ajax( $.extend( true, {
                mode: "abort",
                port: "validate" + element.name,
                dataType: "json",
                data: data,
                context: validator.currentForm,
                success: function( response ) {
                    var valid = response === true || response === "true",
                        errors, message, submitted;

                    validator.settings.messages[ element.name ].remote = previous.originalMessage;
                    if ( valid ) {
                        submitted = validator.formSubmitted;
                        validator.prepareElement( element );
                        validator.formSubmitted = submitted;
                        validator.successList.push( element );
                        delete validator.invalid[ element.name ];
                        validator.showErrors();
                    } else {
                        errors = {};
                        message = response.msg || validator.defaultMessage( element, "remote" );
                        errors[ element.name ] = previous.message = $.isFunction( message ) ? message( value ) : message;
                        validator.invalid[ element.name ] = true;
                        validator.showErrors( errors );
                    }
                    previous.valid = valid;
                    validator.stopRequest( element, valid );
                }
            }, param ) );
            return "pending";
        }
    });