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的功能也已经实现了。
如果大家有什么更好的方法,也可以分享下,第一次尝试写博文,不吝赐教 ^_^。