HTML代码：
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>
css代码：
1 #content div label {2display: inline-block;3width: 100px;4text-align: right;5 }6 #content div {7margin-top: 10px;8 }9 #content textarea {10vertical-align: top;11height: 5em;12 }13 #content span {14display: none;15color: #f00;16 }17 .submit-box {18padding-left: 50px;19 }20 #content input.fail, #content textarea.fail {21border: 1px solid #F00;22 }23 #content input.succ, #content textarea.succ {24border: 1px solid #06F;25 }
jquery代码：
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();53falg=false;54 }55 });56 if(falg){57 alert("submit success!");58 }else{59 event.preventDefault();60 }61 });62 63})
效果图如下：
