表单验证插件——validate

来源：互联网发布：拍照赚钱软件编辑：程序博客网时间：2024/05/22 07:02

表单验证插件——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         #divtest10         {11             width: 282px;12         }13         #divtest .title14         {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 .content24         {25             padding: 8px 0px;26             background-color: #fff;27             font-size: 13px;28         }29         #divtest .content .tip30         {31             color: Red;32             font-size: 12px;33         }34         .fl35         {36             float: left;37         }38         .fr39         {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:true70                           }71                       },72                       /*错误提示位置*/73                       errorPlacement: function (error, element) {74                           error.appendTo(".tip");75                       }76                   }77                 );78             });79         </script>80     </body>81 </html>

View Code

阅读全文

0 0