注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

北漂的小羊

Java编程,开发者,程序员,软件开发,编程,代码。新浪微博号:IT国子监

 
 
 

日志

 
 
关于我

在这里是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。让我们更好地用技术改变世界。请关注新浪微博号: IT国子监(http://weibo.com/itguozijian)

网易考拉推荐

jquery验证框架  

2011-07-28 08:35:40|  分类: JQuery |  标签: |举报 |字号 订阅

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

jquery验证框架 - 天涯草 - 天涯草 
   如果需要自己写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还方便。 


测试: 
什么都不输入,提交 

jquery验证框架 - 天涯草 - 天涯草 
输入错误验证码,提交 

jquery验证框架 - 天涯草 - 天涯草 
    以上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
  评论这张
 
阅读(677)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016