[jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由
2017-10-18 00:00
585 查看
引用源:http://www.cnblogs.com/kyo-yo/archive/2010/07/06/Use-jQuery-Validate-To-Being-Client-Validate-High-2.html
相当的简单,就是判断下用户名是不是指定的用户名。注意:webservice.cs中必须将[System.Web.Script.Services.ScriptService]这个特性取消注释,否则AJAX验证将无效!第二点:默认jQuery.Validate在进行AJAX验证时返回必须是bool类型,如何返回一个对象包括错误消息及验证结果?(具体见App_Code/WebService.cs/CheckUid)在第一点中介绍jQuery.Validate知识的时候就提到了,jQuery.Validate默认直接收true或false,但是在具体的开发中,我们会分层开发,三层或者多层,webservice在接收到验证请求后不做具体的处理直接调用逻辑层的验证方法,交由逻辑层进行验证操作(当然你也可以把验证全部写在webservice中,但是这样就体现不出分层的好处了),此时的验证会产生多种情况,以最常见的用户名验证为例:1)用户名已存在,此时的消息应该是“用户名已存在,请重新输入!”2)用户名不符合规则,此时的消息应该是“用户名不符合规则,请重新输入!”3)验证时出现程序异常,此时的消息应该是“程序出现异常,请联系管理员!”可以看出,仅仅一个用户名验证就会出现这3种信息,如果不返回一个明确的消息,仅仅告诉用户“用户名有误”,客户端的使用者将会相当的痛苦,因为使用者并不知道他的用户名输入到底错在哪了。所以为了更好的客户体验,以及项目的合理性,我们在服务器端封装一个实体类(具体见AppCode/AjaxClass),代码如下:?
就是一个最简单的实体类,有2个属性,Msg和Result,Msg用于存放验证失败的信息,Result用于存放结果。看下WebSerivce的代码如何修改:?
上面的WebService就完整的实现了我先前说的3种错误情况(由于这边仅仅是例子所以就只有表示层,实际开发中需要分层开发,此代码应该放入业务逻辑层)注意:在webservice返回值前,如果检查成功必须要为ajaxClass.Result = 1,否则客户端验证会无法通过。虽然完成了服务器端的代码修改,但是直接运行页面还是会出错,这是因为我上面所说过的,jQuery.Validate的remote远程的输出只能是true或者false,我们来看下具体的代码,其中注释掉的就是原来官方的代码:?
可以看到一共修改了3处地方:1、判断返回值,原来是直接判断response,现在则是判断response.Result,因为现在的response已经是一个包含消息及结果的对象了。2、错误消息,原来的错误消息是直接获取默认配置好的消息,我这边是获取response.Msg。3、设置previous对象,将previous对象的消息和结果设置为AJAX返回的消息和结果,以供jQuery.Validate下面代码的返回。这样jQuery.Validate的remote的方法就修改了,但是并没有结束,原因是先前在AJAX提交参数的时候由于jQuery.Validate的验证规则的缘故,提交的参数并不是以JSON的格式提交的而是以{uid:function()}这样的方式,结果就导致了无法设置jQuery.AJAX的contentType:"application/json;charset=utf-8",如果设置了会出现以下错误:这样从webservice返回的AjaxClass对象就无法像以往的JSON方式直接操作了,所以我们只能换一种格式——XML,因为webservice默认返回的数据是XML格式:?
接下来看下具体的remote方法应该如何编写,设置dataType:”xml”,然后将XML数据转换成一个对象以供上面我修改的jQuery.Validate的remote方法中ajaxsuccess的使用,具体看一下代码:?
就是jQuery.Ajax方法dataFilter,可以在AJAX请求成功后将数据进行过滤处理,这里我就使用了jQuery方法把结果和消息从XML中获取出来直接赋给一个对象,再将这个对象返回,交由ajaxsuccess使用。这样就算是完成了修改jQuery.Validate的remote方法,使得可以返回验证结果及验证消息,看下效果图:第三点:在反复使用jQuery.Validate进行AJAX验证时,总是需要编写相关AJAX参数,可否进行进一步封装?(具体见High-3.aspx和jquery.validate.extension.js)在开发一个系统的时候经常会用到AJAX的验证,而如果每次都要编写上面那么多的代码还是很不方便,所以我现在就来进行一下简单的封装,代码如下:?
这个函数主要接收2个参数,一个是远程验证的路径和需要提交的参数,返回包装好的remote对象。页面调用也很简单,代码如下:?
怎么样?相比上面的代码一下子干净了很多吧?页面上只要做3步操作:1、包装好需要提交的data对象。2、将远程验证地址和包装好的data对象传递给封装好的方法获取remote对象。3、将函数返回的remote对象放入规则中。至此使用jQuery.Validate进行客户端验证——不使用微软验证控件的理由这一系列就算全部写完了,大体上将jQuery.Validate在ASP.NET上的一些常见应用讲了一下,同时也提出了许多我自己修改扩展的东西,希望对正在苦恼客户端验证的朋友有所帮助,谢谢大家的支持了!PS:1、其实这一系列并没有把jQuery.Validate的所有功能介绍完,比如onfocusin,onfocusout,onkeyup等,这些就需要大家在使用的过程中自己查看源代码实验了。2、本文有点长,而且内容比较多,如果文中有什么错误或者有指导意见欢迎大家提出来,谢谢了!源代码下载:点我下载
return uid == "testuid" ? true : false ; } |
123456 | [Serializable] public class AjaxClass { public string Msg { get ; set ;} public int Result { get ; set ;} } |
123456789101112131415161718192021222324252627282930 | [WebMethod] public AjaxClass CheckUid( string uid) { //return uid =="testuid" ?true :false; AjaxClass ajaxClass = new AjaxClass(); try { if (uid == "testuid" ) { ajaxClass.Msg = "用户名已存在,请重新输入!" ; ajaxClass.Result = 0; } else if (uid.IndexOf( "test" ) == -1) { ajaxClass.Msg = "用户名格式不正确,用户名必须包含test,请重新输入!" ; ajaxClass.Result = 0; } else { ajaxClass.Msg = "格式正确!" ; ajaxClass.Result = 1; } } catch { ajaxClass.Msg = "程序出现异常,请联系管理员!" ; ajaxClass.Result = 0; } return ajaxClass; } |
1234567891011121314151617 | success:function(response) { if (response.Result) {//if(response){ var submitted = validator.formSubmitted; validator.prepareElement(element); validator.formSubmitted = submitted; validator.successList.push(element); validator.showErrors(); } else { var errors = {}; //errors[element.name] = response.Result || validator.defaultMessage(element, "remote"); errors[element.name] = response.Msg; validator.showErrors(errors); } previous.message = response.Msg;//previous.valid = response; previous.valid = response.Result; validator.stopRequest(element, response.Result); } |
12345 | <? xml version = "1.0" encoding = "utf-8" ?> - < AjaxClass xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd = "http://www.w3.org/2001/XMLSchema" xmlns = "http://tempuri.org/" > < Msg >用户名格式不正确,用户名必须包含test,请重新输入!</ Msg > < Result >0</ Result > </ AjaxClass > |
1234567891011121314151617181920 | remote:{ type:"POST", dataType:"json", async:false, url:"WebService.asmx/CheckUid", data:{uid:function(){ return jQuery("#<%=txtUid.ClientID %>").val();}}, dataFilter:function(dataXML) { var result = new Object(); result.Result = jQuery(dataXML).find("Result").text(); result.Msg = jQuery(dataXML).find("Msg").text(); if (result.Result == "-1") { result.Result = false; return result; } else { result.Result = result.Result == "1" ?true :false; return result; } } } |
123456789101112131415161718192021222324 | //远程验证抽象方法 function GetRemoteInfo(postUrl, data) { var remote = { type:"POST", async:false, url:postUrl, dataType:"xml", data:data, dataFilter:function(dataXML) { var result = new Object(); result.Result = jQuery(dataXML).find("Result").text(); result.Msg = jQuery(dataXML).find("Msg").text(); if (result.Result == "-1") { result.Result = false; return result; } else { result.Result = result.Result == "1" ?true :false; return result; } } }; return remote; } |
123456789101112131415161718 | <script src="scripts/jquery.validate.extension.js" type="text/javascript"></script> <script type="text/javascript"> function InitRules() { var dataInfo = {uid:function(){ return jQuery("#<%=txtUid.ClientID %>").val();}}; var remoteInfo = GetRemoteInfo('WebService.asmx/CheckUid', dataInfo); opts = { rules: { <%=txtUid.UniqueID %>: { required:true, remote:remoteInfo } } } } </script> |
相关文章推荐
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证——不使用微软验证控件的理由-目录及简介
- [jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证(中级篇-上)——不使用微软验证控件的理由
- [jQuery]使用jQuery.Validate进行客户端验证——不使用微软验证控件的理由-目录及简介[转载]