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>jQuery 验证表单</title> 6 <style> 7 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} 8 form div { margin:5px 0;} 9 .int label { float:left; width:100px; text-align:right;} 10 .int input { padding:1px 1px; border:1px solid #ccc;height:16px;} 11 .sub { padding-left:100px;} 12 .sub input { margin-right:10px; } 13 .formtips{width: 200px;margin:2px;padding:2px;} 14 .onError{ 15 background:#FFE0E9 url(reg3.gif) no-repeat 0 center; 16 padding-left:25px; 17 } 18 .onSuccess{ 19 background:#E9FBEB url(reg4.gif) no-repeat 0 center; 20 padding-left:25px; 21 } 22 .high{ 23 color:red; 24 } 25 </style> 26 <script src="http://www.gamejzy.com/js/jquery.js" type="text/javascript"></script> 27 <script type="text/javascript"> 28 //<![CDATA[ 29 $(function(){ 30 //如果是必填的，则加红星标识. 31 $("form :input.required").each(function(){ 32 var $required = $("<strong class='high'> *</strong>"); //创建元素 33 $(this).parent().append($required); //然后将它追加到文档中 34 }); 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 //进行 Ajax 验证 46 var okMsg = '输入正确.'; 47 $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); 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 $(this).triggerHandler("blur"); 62 }).focus(function(){ 63 $(this).triggerHandler("blur"); 64 });//end blur 65 66 67 //提交，最终验证。 68 $('#send').click(function(){ 69 $("form :input.required").trigger('blur'); 70 var numError = $('form .onError').length; 71 if(numError){ 72 return false; 73 } 74 alert("注册成功,密码已发到你的邮箱,请查收."); 75 }); 76 77 //重置 78 $('#res').click(function(){ 79 $(".formtips").remove(); 80 }); 81 }) 82 //]]> 83 </script> 84 </head> 85 <body> 86 87 <form method="post" action=""> 88 <div class="int"> 89 <label for="username">用户名:</label> 90 <input type="text" id="username" class="required" /> 91 </div> 92 <div class="int"> 93 <label for="email">邮箱:</label> 94 <input type="text" id="email" class="required" /> 95 </div> 96 <div class="int"> 97 <label for="personinfo">个人资料:</label> 98 <input type="text" id="personinfo" /> 99 </div> 100 <div class="sub"> 101 <input type="submit" value="提交" id="send"/><input type="reset" id="res"/> 102 </div> 103 </form> 104 105 </body> 106 </html>
