表单是网页的一个重要组成部分。本节做一个简单的表单提交网页然后利用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> </title> 6 <!-- 7 <link href="style.css" rel="stylesheet" type="text/css" /> --> 8 <style type="text/css"> 9 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;} 10 form div { margin:5px 0;} 11 .int label { float:left; width:100px; text-align:right;} 12 .int input { padding:1px 1px; border:1px solid #ccc;height:16px;} 13 .sub { padding-left:100px;} 14 .sub input { margin-right:10px; } 15 .formtips{width: 200px;margin:2px;padding:2px;} 16 .onError{ 17 background:#FFE0E9 url(img/reg3.gif) no-repeat 0 center; 18 padding-left:25px; 19 } 20 .onSuccess{ 21 background:#E9FBEB url(img/reg4.gif) no-repeat 0 center; 22 padding-left:25px; 23 } 24 .high{ 25 color:red; 26 } 27 </style> 28 <script type="text/javascript" src="../../../scripts/jquery-1.7.2.js"></script> 29 <script type="text/javascript"> 30 $(function(){ 31 //必须填的，就需要加入红星标记 32 $("form :input.required").each(function(){ 33 var $required =$("<strong class='high'>*</strong>"); 34 $(this).parent().append($required); 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 var okMsg = "输入正确."; 46 $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); 47 } 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 //这样再输入的时候只要满足条件就能提示，而不用等到失去焦点后再提示 62 $(this).triggerHandler("blur"); 63 }).focus(function(){ 64 $(this).triggerHandler("blur"); 65 }); 66 67 68 //最终验证 69 $("#send").click(function(){ 70 $("form .required:input").trigger("blur"); 71 var numError = $("form .onError").length; 72 //numError>0,有错，false.阻止表单提交》return false 73 if(numError){ 74 return false; 75 } 76 alert("注册成功，密码已发送至邮箱，注意查收！"); 77 }); 78 }) 79 80 </script> 81 </head> 82 <body> 83 <form action="#" method="post"> 84 <div class="int"> 85 <label for="username">用户名:</label> 86 <input type="text" id="username" class="required" /> 87 </div> 88 <div class="int"> 89 <label for="email">邮箱:</label> 90 <input type="text" id="email" class="required" /> 91 </div> 92 <div class="int"> 93 <label for="personinfo">个人资料:</label> 94 <input type="text" id="personinfo"/> 95 </div> 96 <div class="sub"> 97 <input type="submit" value="提交" id="send"/> 98 <input type="reset" id="res" /> 99 </div> 100 </form> 101 102 </body> 103 </html>