1 <form action="" method="post" id="form-data"> 2   <div id="content"> 3     <div> 4       <label for="username">用户名：</label> 5       <input type="text" name="username" id="username"> 6       <span class="error">用户名不能为空！</span> </div> 7     <div> 8       <label for="email">邮箱：</label> 9       <input type="text" id="email" name="email">10       </input>11       <span class="error">邮箱格式错误!</span> </div>12     <div>13       <label for="tel">电话号码：</label>14       <input type="text" name="tel" id="tel">15       <span class="error">电话号码格式正确！</span> </div>16     <div>17       <label for="msg">留言：</label>18       <textarea name="mess" id="mess"></textarea>19       <span class="error">留言不能为空！</span> </div>20     <div class="submit-box">21       <button type="submit">提交</button>22     </div>23   </div>24   </div>25 </form>

 1 #content div label { 2     display: inline-block; 3     width: 100px; 4     text-align: right; 5 } 6 #content div { 7     margin-top: 10px; 8 } 9 #content textarea {10     vertical-align: top;11     height: 5em;12 }13 #content span {14     display: none;15     color: #f00;16 }17 .submit-box {18     padding-left: 50px;19 }20 #content input.fail, #content textarea.fail {21     border: 1px solid #F00;22 }23 #content input.succ, #content textarea.succ {24     border: 1px solid #06F;25 }

 1 $(function(){ 2         //用户名非空验证 3         $("#username").on("input",function(){ 4             var $this=$(this); 5            if($this.val()){ 6              $(this).addClass("succ").removeClass("fail"); 7             }else{ 8              $(this).addClass("fail").removeClass("succ"); 9             }10         })11         //邮箱验证12         $("#email").on("input blur",function(){13            var $this=$(this);14           var re = /^[a-zA-Z0-9.!#$%&‘*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;15            var is_email=re.test($(this).val()); 16            if(is_email){17                 $(this).addClass("succ").removeClass("fail");18             }else{19                 $(this).addClass("fail").removeClass("succ");20             }21         });22           //验证手机号码23         $("#tel").on("input",function(){24             var $this=$(this);25             var re=/1\d{10}/;26             var is_tel=re.test($(this).val());27             if(is_tel){28                  $(this).addClass("succ").removeClass("fail");29             }else{30                  $(this).addClass("fail").removeClass("succ");31             }32         });33         //留言非空验证34         $("#mess").keyup(function(event) {35             var $this=$(this);36             if($this.val()){37                 $(this).addClass("succ").removeClass("fail");38             }else{39                  $(this).addClass("fail").removeClass("succ");40             }41         });42         43         $("#form-data").submit(function(event){44             var falg=true;45              //$(‘element‘, this)相当于$(this).find(‘element‘)46             $("input,textarea",this).each(function() {47                 var $this=$(this);48                 var is_succ=$this.hasClass("succ");49                 if(is_succ){50                     $this.siblings(".error").hide();51                 }else{52                     $this.siblings(".error").show();53                    falg=false;54                 }55             });56             if(falg){57                   alert("submit success!");58              }else{59                   event.preventDefault();60              }61         });62           63     })