省时省力的jquery证验框架

省时省力的jquery验证框架
前段的表单验证，重复性高，虽然网上一大堆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，那么真实悲剧啊，下面是不使用框架的代码
那个写的一个叫累，写了这么多后，发现居然没有处理获取焦点后，提示消失

只需要做出如下更改：
先引入lib
<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>



然后直接写就可以了


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


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


输入错误验证码，提交




    以上demo只是基本的使用，你还可以复杂的控制，比如在里面控制错误显示，demo里面的错误显示是自己在html里面控制的<span id="errorMessage" style="color: red;">，必须放到form表单内，否则错误提示在你时间触发时候不会消失，只会又生成一个提示，非常bug。
用框架控制，就紧跟message方法后面
// 定义错误信息提示的位置和样式errorElement: "em",// 定义错误标记标签，<em>error</em>errorPlacement: function(error,element){element.nextAll("i").addClass("error");element.nextAll("i").append(error);},// 定义验证成功相关样式和事件success: function(label) {}});