jquery表單驗證
阿新 • • 發佈：2018-08-13
ger clas remove col for 郵箱 追加 重置 UNC
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 <link href="css/style.css" rel="stylesheet" type="text/css" /> 7 <!-- 引入jQuery --> 8 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> 9 <script type="text/javascript"> 10 //<![CDATA[ 11 $(function(){ 12 //如果是必填的，則加紅星標識.13 $("form :input.required").each(function(){ 14 var $required = $("<strong class=‘high‘> *</strong>"); //創建元素 15 $(this).parent().append($required); //然後將它追加到文檔中 16 }); 17 //文本框失去焦點後 18 $(‘form :input‘).blur(function(){ 19 var $parent = $(this).parent(); 20 $parent.find(".formtips").remove();21 //驗證用戶名 22 if( $(this).is(‘#username‘) ){ 23 if( this.value=="" || this.value.length < 6 ){ 24 var errorMsg = ‘請輸入至少6位的用戶名.‘; 25 $parent.append(‘<span class="formtips onError">‘+errorMsg+‘</span>‘); 26 }else{ 27 var okMsg = ‘輸入正確.‘; 28 $parent.append(‘<span class="formtips onSuccess">‘+okMsg+‘</span>‘); 29 } 30 } 31 //驗證郵件 32 if( $(this).is(‘#email‘) ){ 33 if( this.value=="" || ( this.value!="" && ) ) ){ 34 var errorMsg = ‘請輸入正確的E-Mail地址.‘; 35 $parent.append(‘<span class="formtips onError">‘+errorMsg+‘</span>‘); 36 }else{ 37 var okMsg = ‘輸入正確.‘; 38 $parent.append(‘<span class="formtips onSuccess">‘+okMsg+‘</span>‘); 39 } 40 } 41 }).keyup(function(){ 42 $(this).triggerHandler("blur"); 43 }).focus(function(){ 44 $(this).triggerHandler("blur"); 45 });//end blur 46 47 48 //提交，最終驗證。 49 $(‘#send‘).click(function(){ 50 $("form :input.required").trigger(‘blur‘); 51 var numError = $(‘form .onError‘).length; 52 if(numError){ 53 return false; 54 } 55 alert("註冊成功,密碼已發到你的郵箱,請查收."); 56 }); 57 58 //重置 59 $(‘#res‘).click(function(){ 60 $(".formtips").remove(); 61 }); 62 }) 63 //]]> 64 </script> 65 </head> 66 <body> 67 68 <form method="post" action=""> 69 <div class="int"> 70 <label for="username">用戶名:</label> 71 <input type="text" id="username" class="required" /> 72 </div> 73 <div class="int"> 74 <label for="email">郵箱:</label> 75 <input type="text" id="email" class="required" /> 76 </div> 77 <div class="int"> 78 <label for="personinfo">個人資料:</label> 79 <input type="text" id="personinfo" /> 80 </div> 81 <div class="sub"> 82 <input type="submit" value="提交" id="send"/><input type="reset" id="res"/> 83 </div> 84 </form> 85 86 </body> 87 </html>
jquery表單驗證