表单验证插件——validate
该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：
$(form).validate({options})
其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>表单验证插件</title> 5 <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> 6 <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script> 7 <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script> 8 <style> 9 #divtest 10 { 11 282px; 12 } 13 #divtest .title 14 { 15 padding: 8px; 16 background-color: blue; 17 color: #fff; 18 height: 23px; 19 line-height: 23px; 20 font-size: 15px; 21 font-weight: bold; 22 } 23 #divtest .content 24 { 25 padding: 8px 0px; 26 background-color: #fff; 27 font-size: 13px; 28 } 29 #divtest .content .tip 30 { 31 color: Red; 32 font-size: 12px; 33 } 34 .fl 35 { 36 float: left; 37 } 38 .fr 39 { 40 float: right; 41 } 42 </style> 43 </head> 44 <body> 45 <form id="frmV" method="get" action="#"> 46 <div id="divtest"> 47 <div class="title"> 48 <span class="fl">表单验证插件</span> 49 <span class="fr"> 50 <input id="btnSubmit" type="submit" value="提交" /> 51 </span> 52 </div> 53 <div class="content"> 54 <span class="fl">邮箱：</span><br /> 55 <input id="email" name="email" type="text" /><br /> 56 <span class="tip"></span> 57 </div> 58 </div> 59 </form> 60 61 <script type="text/javascript"> 62 $(function () { 63 $("#frmV").validate( 64 { 65 /*自定义验证规则*/ 66 rules: { 67 email:{ 68 required:true, 69 email:true 70 } 71 }, 72 /*错误提示位置*/ 73 errorPlacement: function (error, element) { 74 error.appendTo(".tip"); 75 } 76 } 77 ); 78 }); 79 </script> 80 </body> 81 </html>