jQuery实现表单验证

　　表单是网页的一个重要组成部分。本节做一个简单的表单提交网页然后利用jQuery实现表单的验证。后续的表单完善以及功能的完善会在以后的博客中给出。
　　效果图：
代码：
  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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title> </title>
  6 <!-- 
  7 <link href="style.css" rel="stylesheet" type="text/css" /> -->
  8 <style type="text/css">
  9     body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
 10     form div { margin:5px 0;}
 11     .int label { float:left; width:100px; text-align:right;}
 12     .int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
 13     .sub { padding-left:100px;}
 14     .sub input { margin-right:10px; }
 15     .formtips{width: 200px;margin:2px;padding:2px;}
 16     .onError{
 17         background:#FFE0E9 url(img/reg3.gif) no-repeat 0 center;
 18         padding-left:25px;
 19     }
 20     .onSuccess{
 21         background:#E9FBEB url(img/reg4.gif) no-repeat 0 center;
 22         padding-left:25px;
 23     }
 24     .high{
 25         color:red;
 26     }
 27 </style> 
 28 <script type="text/javascript" src="../../../scripts/jquery-1.7.2.js"></script>
 29 <script type="text/javascript">
 30     $(function(){
 31         //必须填的，就需要加入红星标记
 32         $("form :input.required").each(function(){
 33             var $required =$("<strong class='high'>*</strong>");
 34             $(this).parent().append($required);
 35         });
 36         $('form :input').blur(function(){
 37             var $parent=$(this).parent();
 38             $parent.find(".formtips").remove();//删除以前的提醒元素
 39             //验证用户名
 40             if($(this).is('#username')){
 41                 if (this.value == "" || this.value.length < 6) {
 42                     var errorMsg = "请输入至少6位的用户名.";
 43                     $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
 44                 }else{
 45                     var okMsg = "输入正确.";
 46                     $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
 47                 }
 48             }
 49 
 50             //验证邮箱
 51             if($(this).is('#email')){
 52                 if (this.value == "" || ( this.value!="" && !/.+@.+.[a-zA-Z]{2,4}$/.test(this.value)) ) {
 53                     var errorMsg = "请输入正确的E-mail 地址";
 54                     $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
 55                 }else{
 56                     var okMsg = "输入正确";
 57                     $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
 58                 }
 59             }
 60         }).keyup(function(){
 61             //这样再输入的时候只要满足条件就能提示，而不用等到失去焦点后再提示
 62             $(this).triggerHandler("blur");
 63         }).focus(function(){
 64             $(this).triggerHandler("blur");
 65         });
 66 
 67 
 68         //最终验证
 69         $("#send").click(function(){
 70             $("form .required:input").trigger("blur");
 71             var numError = $("form .onError").length;
 72             //numError>0,有错，false.阻止表单提交》return false
 73             if(numError){
 74                 return false;
 75             }
 76             alert("注册成功，密码已发送至邮箱，注意查收！");
 77         });
 78     })
 79     
 80 </script>
 81 </head>
 82 <body>
 83     <form action="#" method="post">
 84         <div class="int">
 85             <label for="username">用户名:</label>
 86             <input type="text" id="username" class="required" />
 87         </div>
 88         <div class="int">
 89             <label for="email">邮箱:</label>
 90             <input type="text" id="email" class="required" />
 91         </div>
 92         <div class="int">
 93             <label for="personinfo">个人资料:</label>
 94             <input type="text" id="personinfo"/>
 95         </div>
 96         <div class="sub">            
 97             <input type="submit" value="提交" id="send"/>
 98             <input type="reset" id="res" />
 99         </div>
100     </form>
101     
102 </body>
103 </html>