標籤：dtd blur ext click oat remove var span function
目標：使用jQuery進行表單驗證。
功能：1.必填選項後面添加了紅色小星星；
2.選中開始輸入時，輸入文字框會改變當前背景色，增強使用者體驗；
3.輸入的時候就開始驗證，當輸入格式正確就會提醒，就是當前還停留在輸入框，或者點擊提交按鈕；
4.設定重設按鈕，點擊重設，會清除文字框裡面的所有內容。
：
HTML代碼：
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 charset=utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 9 <form method="post" action="">10 <div class="int">11 <label for="username">使用者名稱:</label>12 <input type="text" id="username" class="required" />13 </div>14 <div class="int">15 <label for="email">郵箱:</label>16 <input type="text" id="email" class="required" />17 </div>18 <div class="int">19 <label for="personinfo">設定檔:</label>20 <input type="text" id="personinfo" />21 </div>22 <div class="sub">23 <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>24 </div>25 </form>26 27 </body>28 </html>
CSS代碼：
1 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} 2 form div { margin:5px 0;} 3 .int label { float:left; width:100px; text-align:right;} 4 .int input { padding:1px 1px; border:1px solid #ccc;height:16px;} 5 .sub { padding-left:100px;} 6 .sub input { margin-right:10px; } 7 .formtips{width: 200px;margin:2px;padding:2px;} 8 .onError{ 9 background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;10 padding-left:25px;11 }12 .onSuccess{13 background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;14 padding-left:25px;15 }16 .high{17 color:red;18 }19 20 .focus { 21 border: 1px solid #f00;22 background: #fcc;23 }
Jquery代碼：
1 <script type="text/javascript"> 3 $(function(){ 4 5 6 //2.如果是必填的，則加紅星標識. 7 $("form :input.required").each(function(){ 8 var $required = $("<strong class=‘high‘> *</strong>"); //建立元素 9 $(this).parent().append($required); //然後將它追加到文檔中10 });11 12 13 //3.文字框失去焦點後開始驗證14 $(‘form :input‘).blur(function(){15 var $parent = $(this).parent();16 $parent.find(".formtips").remove();17 18 19 //3.1驗證使用者名稱20 if( $(this).is(‘#username‘) ){21 if( this.value=="" || this.value.length < 6 ){22 var errorMsg = ‘請輸入至少6位的使用者名稱.‘;23 $parent.append(‘<span class="formtips onError">‘+errorMsg+‘</span>‘);24 }else{25 var okMsg = ‘輸入正確.‘;26 $parent.append(‘<span class="formtips onSuccess">‘+okMsg+‘</span>‘);27 }28 }29 30 //3.2驗證郵件31 if( $(this).is(‘#email‘) ){32 if( this.value=="" || ( this.value!="" && !/[email protected]+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){33 var errorMsg = ‘請輸入正確的E-Mail地址.‘;34 $parent.append(‘<span class="formtips onError">‘+errorMsg+‘</span>‘);35 }else{36 var okMsg = ‘輸入正確.‘;37 $parent.append(‘<span class="formtips onSuccess">‘+okMsg+‘</span>‘);38 }39 }40 41 //3.3實現一邊輸入一邊驗證42 }).keyup(function(){43 $(this).triggerHandler("blur");44 }).focus(function(){45 $(this).triggerHandler("blur");46 });//end blur47 48 49 //3.4提交，最終驗證。50 $(‘#send‘).click(function(){51 $("form :input.required").trigger(‘blur‘);52 var numError = $(‘form .onError‘).length;53 if(numError){54 return false;55 } 56 alert("註冊成功,密碼已發到你的郵箱,請查收.");57 });58 59 //4.重設60 $(‘#res‘).click(function(){61 $(".formtips").remove(); 62 });63 64 //1.選中輸入的時候輸入框變色65 $(":input").focus(function(){66 $(this).addClass("focus");67 }).blur(function(){68 $(this).removeClass("focus");69 });70 71 72 })73 74 </script>
此案例是基於jQuery1.7，所以需要額外引入jQuery.
jQuery表單驗證案例
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
