2-1 表单验证插件——validate
本节编程练习不计算学习进度，请电脑登录imooc.com操作

表单验证插件——validate

该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：

$(form).validate({options})

其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。

例如，当点击表单中的“提交”按钮时，调用validate插件验证用户名输入是否符合规则，并将异常信息显示在页面中，如下图所示：

在浏览器中显示的效果：

从图中可以看出，在页面中导入了validate插件，当用户在输入框中录入用户名时，自动根据规则进入验证，并显示提示信息，验证成功后，表单才能提交。

任务

我来试试，亲自使用validate插件，完成对邮件格式的验证。

在下列代码的第33、34、35行中，通过插件的配置对象，验证邮件格式。

index.htmlstyle.css 
  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.         <link href="style.css" rel="stylesheet" type="text/css" />
  6.         <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
  7.         <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script>
  8.         <script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script>
  9.     </head>
  10.     <body>
  11.         <form id="frmV" method="get" action="#">
  12.             <div id="divtest">
  13.                 <div class="title">
  14.                     <span class="fl">表单验证插件</span> 
  15.                     <span class="fr">
  16.                         <input id="btnSubmit" type="submit" value="提交" />
  17.                     </span>
  18.                 </div>
  19.                 <div class="content">
  20.                     <span class="fl">邮箱：</span><br />
  21.                     <input id="email" name="email" type="text" /><br />
  22.                     <span class="tip"></span>
  23.                 </div>
  24.             </div>
  25.         </form>
  26.  
  27.         <script type="text/javascript">
  28.             $(function () {
  29.                 $("#frmV").validate(
  30.                   {
  31.                       /*自定义验证规则*/
  32.                       rules: {
  33.                             ?
  34.                             ?
  35.                             ?
  36.                           }
  37.                       },
  38.                       /*错误提示位置*/
  39.                       errorPlacement: function (error, element) {
  40.                           error.appendTo(".tip");
  41.                       }
  42.                   }
  43.                 );
  44.             });
  45.         </script>
  46.     </body>
  47. </html>
  1. #divtest
  2. {
  3.     width: 282px;
  4. }
  5. #divtest .title
  6. {
  7.     padding: 8px;
  8.     background-color: blue;
  9.     color: #fff;
  10.     height: 23px;
  11.     line-height: 23px;
  12.     font-size: 15px;
  13.     font-weight: bold;
  14. }
  15. #divtest .content
  16. {
  17.     padding: 8px 0px;
  18.     background-color: #fff;
  19.     font-size: 13px;
  20. }
  21. #divtest .content .tip
  22. {
  23.     color: Red;
  24.     font-size: 12px;
  25. }
  26. .fl
  27. {
  28.     float: left;
  29. }
  30. .fr
  31. {
  32.     float: right;
  33. }
下一节