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

<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代碼：

$(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的功能也已經實現了。

如果大家有什么更好的方法，也可以分享下，第一次嘗試寫博文，不吝賜教 ^_^。