jquery验证框架

原文出处：http://iteye.blog.163.com/blog/static/186308096201162883540737/?suggestedreading&wumii

前段的表单验证，重复性高，虽然网上一大堆js代码，每当邮件，电话号码什么的验证，直接copy，但是有了这个框架真实美包包。 
   jquery validate 验证框架，本来想详细写写用法，发现坛子里paskaa几年前写过，不知道为何帖子沉了。 
详细使用： 
http://www.iteye.com/topic/276661 
http://www.iteye.com/topic/280295 
官方文档参考：http://docs.jquery.com/Plugins/Validation 
官方那个，我感觉这个文档写的不是很详细，读了几遍还是发现有些没讲清楚 
既然有了前面的东东，我发帖的主要是为了分享好东东，并且写写我们项目里demo 
面对如下一个表单验证： 

 
   如果需要自己写js，那么真实悲剧啊，写的一个叫累，写了这么多后，发现居然没有处理获取焦点后，提示消失，下面是不使用框架的代码 

Java代码  

1. $(document).ready(function() {  
2.         $("#errorAuthor").hide();  
3.         $("#errorContent").hide();  
4.         $("#errorverifyCode").hide();  
5.         $("#errorverifyCodeError").hide();  
6.           
7.     $("#verifyImage").click(function(){  
8.         $(this).attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());  
9.     });  
10.     $("#cmmAuthor").click(function() {  
11.         $("#errorAuthor").hide();  
12.     });  
13.   
14.     $("#cmmContent").click(function() {  
15.         $("#errorContent").hide();  
16.     });  
17.     $("#verifyCode").click(function() {  
18.         $("#errorverifyCode").hide();  
19.         $("#errorverifyCodeError").hide();  
20. $.get("../productComment/prd_comt_verifyCode.action", function(data){  
21.             if(data=="error"){  
22.                 $("#errorverifyCodeError").show();  
23.                 return ;  
24.             }  
25.     });  
26.     });  
27.   
28.   
29.       
30.       
31.       
32.       
33. });  
34.   
35. function changeVerifyCode() {  
36.     $("#verifyImage").attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());  
37. }  
38.   
39. function submitForm() {  
40.     var author=$("#cmmAuthor").attr("value");  
41.     var content=$("#cmmContent").attr("value");  
42.     var verifyCode=$("#verifyCode").attr("value");  
43.     var value=$("#verifyCode").attr("value");  
44.     if(author==""){  
45.         $("#errorAuthor").show();  
46.         return ;  
47.     }  
48.     if(content==""){  
49.         $("#errorContent").show();  
50.         return ;  
51.     }  
52.     if(verifyCode==""){  
53.         $("#errorverifyCode").show();  
54.         return ;  
55.     }  
56.       
57.       
58.     $("form:first").submit();  
59. }   
60.     

使用框架： 
只需要做出如下更改，先引入lib，然后直接写就可以了，注意加载顺序 

引用

<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/core/jquery-1.4.2.min.js" type="text/javascript" language="javascript"></script> 
<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/jquery.validate.min.js" type="text/javascript" language="javascript"></script> 
<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/jquery.validate.messages_cn.js" type="text/javascript" language="javascript"></script> 
<script src="${application.WebResourceUrl }/scripts/global/lib/jquery/addons/jquery.validate-1.7/additional-methods.js" type="text/javascript" language="javascript"></script> 

Java代码  

1. <script type="text/javascript" >  
2. $(document).ready(function() {  
3. $("#verifyImage").click(function(){  
4.         $(this).attr("src", "/yiyaosou-webapp-front/random.action?d=" + Math.random());  
5.     });  
6.   
7.     $("#productComment").validate({  
8.         rules: {  
9.             cmmAuthor: {  
10.                 required: true  
11.             },  
12.             cmmContent: {  
13.                 required: true  
14.             },  
15.             verifyCode:{  
16.                 required: true,  
17.                 remote: "../productComment/prd_comt_verifyCode.action"  
18.             }  
19.         },  
20.         messages: {  
21.             cmmAuthor:{  
22.                 required: "请输入您的姓名或昵称"  
23.             },  
24.             cmmContent:{  
25.                 required: "请输入您的评论"  
26.             },  
27.             verifyCode:{  
28.                 required: "请输入验证码",  
29.                 remote: "验证码不正确"  
30.             }  
31.         },  
32.           
33.         errorPlacement: function(error,element){  
34.               
35.             $("#errorMessage").append(error);  
36.             $("#errorMessage").append($("<br/>"));  
37.               
38.         },  
39.             success: function(label) {  
40.         }  
41.     });   
42.       
43. });  

remote为ajax验证，如果返回值是true，那么无提示，不返回就提示错误信息，这个比jqury写ajax还方便。 


测试： 
什么都不输入，提交 

 
输入错误验证码，提交 

 
    以上demo只是基本的使用，你还可以复杂的控制，比如在里面控制错误显示，demo里面的错误显示是自己在html里面控制的<span id="errorMessage" style="color: red;">，必须放到form表单内，否则错误提示在你时间触发时候不会消失，只会又生成一个提示，非常bug。 
用框架控制，就紧跟message方法后面 

Java代码  

1. // 定义错误信息提示的位置和样式  
2.         errorElement: "em", // 定义错误标记标签，<em>error</em>  
3.   
4.         errorPlacement: function(error,element){  
5.             element.nextAll("i").addClass("error");  
6.             element.nextAll("i").append(error);  
7.         },  
8.           
9.         // 定义验证成功相关样式和事件  
10.         success: function(label) {  
11.         }  
12.     });   

新浪微博：IT国子监(记得关注噢) http://weibo.com/itguozijian