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的功能也已经实现了。

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

posted on 2013-04-01 09:58  xiawuyi  阅读(7909)  评论(0编辑  收藏  举报