Jquery validate之remote用法

validate是一个基于Jquery的表单验证插件，利用他的remote可以用来自定义远程验证，最近在项目中用到这个，但是在这当中遇到的几个问题，感觉让人很误解，下面我们来看例子。

这是要验证的表单：

1. <form id="frm" name="frm" class="validateform">  
2. <p><label for="pinm86">&nbsp;品名:</label><input type="text" id="pinm86" name="pinm86" /></p>  
3. <p><label for="fangjianid78">房间号:</label><input type="text" id="fangjianid78" name="fangjianid78" /></p>  
4. </form>  

这里我要验证品名的唯一性，如果输入品名重复就提示

下面是JS代码

1. <script type="text/javascript">   
2. jQuery(document).ready(function($){   
3.     $(".validateform").validate({   
4.   
5.           rules:{   
6.                  pinm86:{   
7.                           required:true,   
8.                           remote:{   
9.                             url: "validateSbSbinfoData.action", //后台处理程序    
10.                             type: "get",  //数据发送方式   
11.                             dataType: "json",       //接受数据格式       
12.                             data:  {                     //要传递的数据   
13.                                 pinm86: function() {   
14.                                     return $("#pinm86").val();   
15.                                            }   
16.   
17.                                    }   
18.             
19.                                }     
20.                          }   
21.                       },   
22.     messages:{    
23.         pinm86:{    
24.         remote:"品名已经存在!"    
25.         } }   
26.             
27.          
28.     });   
29. });   
30. </script>  

很多网上文章在只提到remote接受Json格式数据,然后就没有了，其实remote接受的返回值只要true和false即可，通过查看源代码可以发现，remote通过返回的false和true来判断的，那么就是说你后台程序只要返回true和false值，这点让我误解了许久。由于项目用到了Struts2,这是struts的配置文件，相信你不会陌生吧：

1. <package name="json_sbSbinfo" extends="json-default">  
2. <action name="validateSbSbinfoData" class="sbSbinfoAction" method="validateData">  
3.             <result name="success" type="json">  
4.                        <param name="defaultEncoding">UTF-8</param>  
5.                        <param name="root">resstr</param>  这里的resstr 就是Action里面对应的属性值
6.             </result>  
7.             <result name="error" type="json"><param name="defaultEncoding">UTF-8</param></result>  
8.         </action>  
9. </package>  

 

这边有俩点要注意一下：1.因为Action里面要返回Json数据格式所以<package name="json_sbSbinfo" extends="json-default">    这里的extends是“json-default” 而不是以往的“struts-default”。

2.要加上这个参数 <param name="root">resstr</param>  这里的resstr 就是Action里面对应的属性值

下面是sbSbinfoAction

1. public class SbSbinfoAction extends ActionSupport implements ServletRequestAware,SessionAware {   
2.   
3.     private boolean resstr;   
4.   
5.   
6.     public String validateData()   
7.     {     
8.         String result = ERROR;   
9.         String vcpinm=(String)this.request.getParameter("pinm86");   
10.         Map map= new HashMap();   
11.         map= sbSbinfoService.validateData(vcpinm);   
12.         Object dd=map.get("n");   
13.         String s=dd.toString();   
14.         if(s.equals("0"))   
15.         {this.resstr=true;}   
16.         else  
17.         {this.resstr=false;   
18.                
19.         }   
20.         result= SUCCESS;   
21.         return result;   
22.     }   
23.   
24.        
25.     @JSON(serialize=false)   
26.     public SbSbinfoService getSbSbinfoService() {   
27.         return sbSbinfoService;   
28.     }   
29.   
30.   
31.   
32.     public boolean getResstr() {   
33.         return resstr;   
34.     }   
35.   
36.     public void setResstr(boolean resstr) {   
37.         this.resstr = resstr;   
38.     }   
39.   
40.   
41. }                                                                                                                                                                                                                                                    

=====================================================================

jquery.validate.js作为前端开发的利器之一，深受广大前端工程师的喜爱，然而很多人却不善于利用remote，下面，对，就是下面，下面还有，我们来看看如何更合理的利用jQuery validate的remote。

介绍的内容主要有两点：

1. 传统情况下，我们习惯使用addMethod方法为某个input提供后端验证机制，而不善于使用remote。
2. 为remote方法提供附加的动态参数，比如你要验证昵称有没有被使用，你需要传递一下用户id。

第一步：下载jquery.validate.js，并使用下面的语句将其加入到项目中

[html]  view plain  copy

1. <script src="js/jquery.validate.js" type="text/javascript"></script>  

第二步：注意remote源码，注意注释和附加参数！

[javascript]  view plain  copy

1. remote: function( value, element, param ) {  
2.     if ( this.optional(element) ) {  
3.         return "dependency-mismatch";  
4.     }  
5.   
6.     // 已经验证过了，会从这里面取  
7.     var previous = this.previousValue(element);  
8.     if (!this.settings.messages[element.name] ) {  
9.         this.settings.messages[element.name] = {};  
10.     }  
11.     previous.originalMessage = this.settings.messages[element.name].remote;  
12.     this.settings.messages[element.name].remote = previous.message;  
13.   
14.     param = typeof param === "string" && {url:param} || param;  
15.   
16.     if ( previous.old === value ) {  
17.         return previous.valid;  
18.     }  
19.   
20.     previous.old = value;  
21.     var validator = this;  
22.     this.startRequest(element);  
23.     var data = {};  
24.     data[element.name] = value;  
25.       
26.     // 设置附加参数  
27.     if($(element).attr("params")){  
28.         // 通过eval方法将附加参数转换为object对象  
29.         var params = eval('(' + $(element).attr("params") + ')');  
30.         for(var p in params){  
31.             data[p] = params[p];  
32.         }  
33.     }  
34.       
35.     $.ajax($.extend(true, {  
36.         url: param,// 传递的后台url，来进行数据验证  
37.         mode: "abort",  
38.         type: "post",  
39.         port: "validate" + element.name,  
40.         dataType: "json",  
41.         data: data,//传递的参数为对应intput标签对应name和value值  
42.         success: function( response ) {//response为后台返回数据，错误的时候返回错误提示信息，正确的时候返回true  
43.             validator.settings.messages[element.name].remote = previous.originalMessage;  
44.             var valid = response === true || response === "true";//如果返回true，则会进入到if语句，错误提示消失  
45.             if ( valid ) {  
46.                 var submitted = validator.formSubmitted;  
47.                 validator.prepareElement(element);  
48.                 validator.formSubmitted = submitted;  
49.                 validator.successList.push(element);  
50.                 delete validator.invalid[element.name];  
51.                 validator.showErrors();  
52.             } else {  
53.                 var errors = {};  
54.                 var message = response || validator.defaultMessage( element, "remote" );//如果后台返回有错误提示信息，则不会取默认显示信息  
55.                 errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;  
56.                 validator.invalid[element.name] = true;  
57.                 validator.showErrors(errors);  
58.             }  
59.             previous.valid = valid;  
60.             validator.stopRequest(element, valid);  
61.         }  
62.     }, param));  
63.     return "pending";  
64. }  

第三步：页面上配置remote，请注意params属性！

[html]  view plain  copy

1. <input type="text" class="required alphanumeric" remote="${ctx}/jade/checkCodeIsExist.do" name="code"/>  

[html]  view plain  copy

1. <input name="marketname" id="marketname" class="required" maxlength="50" params="{oldname:'${market.marketname}'}" type="text" value="${market.marketname}" remote="${ctx}/stocks_config/marketnameCheck.do" maxlength="10">  

第四步：后台接收参数进行check，返回对应处理信息

注意：正常的时候返回true，检验不通过的时候返回错误提示信息

[java]  view plain  copy

1. @RequestMapping(value = "checkCodeIsExist")  
2. public void checkCodeIsExist(HttpServletRequest request, HttpServletResponse reponse) throws Exception {  
3. <span style="white-space:pre">    </span>Jadeinfo jadeinfo = this.jadeinfoDAO.selectByCodeKey(StrUtil.getUTF8String(request.getParameter("code")));  
4.   
5.     if (jadeinfo != null && jadeinfo.getDeleteflag() == 0) {  
6.         out("商品代码已存在！", reponse);  
7.     } else {  
8.         out(true, reponse);  
9.     }  
10. }  

第五步：one more thing!

来看看传统的addMethod方法，我觉得够麻烦的，对比一下remote，相形见绌哦！当然了，addMethod还是有其应用场景呢！

[javascript]  view plain  copy

1. jQuery.validator.addMethod("codeCheck", function(value, element) {  
2.     $.ajax({  
3.         url : common.ctx + "/jade/jade.do?action=checkCode",// 请求的URL  
4.         data : {  
5.             code : value  
6.         },// 传递给action的参数{dictTypeId:'PC_STATE'}  
7.         async : false, // 改异步为同步  
8.         dataType : 'json',  
9.         success : function(records) {  
10.             $("#checkcode").val(records);  
11.         }  
12.     });  
13.     var result = $("#checkcode").val();  
14.     if (result == "true") {  
15.         return this.optional(element) || true;  
16.     } else {  
17.         return this.optional(element) || false;  
18.     }  
19.   
20. }),  

总结：最后呢，就附上一张效果图吧，也没啥！