jquery-validate remote验证，返回不同的消息内容

前段时间工作中遇到类似的表单验证的问题：对同一文本框进行不同的验证，返回不同的消息提示。截图如下：

        1.如果会员信息不存在，提示用户 “该会员不存在”
　　　　
       
        2.如果会员状态已注销，提示用户：“该会员状态已注销，不能录入会员信息”
　　　　
        
        最开始的需求只需要判断会员是否存在，这个直接使用 jquery-validate 的remote验证即可实现。

        代码如下：
            前台 html:

<form action="/Home/Submit" method="post" id="VIPForm">

       <table>

          <tr>

              <td>会员名：</td>

              <td><input type="text" id="txtName" name="txtName" /></td>

            </tr>

            <tr>

                <td colspan="2"><input type="submit" value="录入会员信息" /></td>

            </tr>

        </table>

    </form>

引入js

View Code

<script src="http://www.cnblogs.com/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>

<script src="http://www.cnblogs.com/Scripts/jquery.validate.js" type="text/javascript"></script>

<script src="http://www.cnblogs.com/Scripts/jquery.form.js" type="text/javascript"></script><!--使用表单ajax提交，需要引入该js库-->

js代码：

View Code

$(document).ready(function () {

        var validator = $("#VIPForm").validate({

            onkeyup: false,

            submitHandler: function (form) {

                $("#VIPForm").ajaxSubmit();

            },

            onfocusout: function (element) {

                this.element(element);

            },

            errorPlacement: function (error, element) {

                var elementName = element.attr('name');

                error.appendTo(element.parent());

            },

            success: function (label, element) {

                var elementId = $(element).attr("id");

                label.text("OK");

            },

            rules: {

                txtName: {

                    required: true,

                    remote: {

                        url: "/Home/ValidateVIPName",

                        type: "post",

                        data: {

                            txtName: function () {

                                return $('#txtName').val();

                            }

                        }

                    }

                }

            },

            messages: {

                txtName: {

                    required: " 请输入会员名称",

                    remote: "该会员不存在"

                }

            }

        });

    });

后台Controller remote验证的方法：

public JsonResult ValidateVIPName()

        {

            bool success = false;

            string message = string.Empty;

            string customerName = Request["txtName"].ToString();

            List<string> customers = new List<string>() { "zhangsan", "lisi", "wangwu" };

            if (customers.Contains(customerName))

            {

                   success = true;

            }

            else

            {

                success = false;

            }

            return Json(success, JsonRequestBehavior.AllowGet);

        }

remote方法返回的值是布尔类型的，所以controller中的验证方法直接返回布尔类型就可以了。这样，需求1就已经实现了。
现在用户想要加入新的需求：需要验证用户录入的会员状态是否有效。
这就需要remote方法实现对同一个输入框进行多次验证，并返回不同的消息内容。
查看了下jquery.validate.js中remote方法的源码，继续贴代码：

remote: function(value, element, param) {

            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;

           

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

           

            if ( previous.old !== value ) {

                previous.old = value;

                var validator = this;

                this.startRequest(element);

                var data = {};

                data[element.name] = value;

                $.ajax($.extend(true, {

                    url: param,

                    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 ( valid ) {

                            ......

                        } else {

                            ......

                        }

                        previous.valid = valid;

                        validator.stopRequest(element, valid);

                    }

                }, param));

                return "pending";

            } else if( this.pending[element.name] ) {

                return "pending";

            }

            return previous.valid;

        },

标粗的绿色代码，是我们需要关注的，这里返回的的response是bool类型的， 也就是之前实现需求1中，ValidateVIPName方法需要返回bool类型的原因。 想要remote方法不只是返回bool类型，还需要返回不同的消息内容，我们可以这样修改代码：
  1，修改ValidateVIPName()方法：

public JsonResult ValidateVIPName()

        {

            bool success = false;

            string message = string.Empty;

            string customerName = Request["txtName"].ToString();

            List<string> customers = new List<string>() { "zhangsan", "lisi", "wangwu" };

            if (customers.Contains(customerName))

            {

                if (customerName != "lisi")

                {

                    success = true;

                }

                else {

                    success=false;

                    message = "该会员状态已注销,不能录入会员信息";

                }

            }

            else

            {

                success = false;

                message="该会员不存在";

            }

            return Json(new { success = success, message = message }, JsonRequestBehavior.AllowGet);

        }

这里返回不同的消息和bool值。

2，修改remote中的success方法，success: function(response) 这里的 response是remote请求ValidateVIPName方法返回的json数据，现在ValidateVIPName方法返回类型已经修改，所以该回调函数中的代码也要做相应的修改：
success回调函数中，将这两行代码：
                    validator.settings.messages[element.name].remote = previous.originalMessage;
                    var valid = response === true;
修改为：
                 var tempResponse = response;
                        if (tempResponse.success != undefined) {
                            response = tempResponse.success;
                        }
                        if (tempResponse.message != undefined) {
                            validator.settings.messages[element.name].remote = tempResponse.message;
                        } else {
                            validator.settings.messages[element.name].remote = previous.originalMessage;
                        }
                        var valid = response === true; 

修改好代码后，需求2的功能也已经实现了。

如果大家有什么更好的方法，也可以分享下，第一次尝试写博文，不吝赐教 ^_^。