学了一点jquery的简单应用。自我感觉这个jquery的强大之处。如果同时结合着js与部分正则表达式的综合运用有事半功倍之效，这里有一个小小的应用一同与大家分享。不足之处，希望大家指出，大家共同进步......此文适合jquery菜鸟级别的读者。
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>简单的表单验证</title> 6 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 //表单验证 10 11 //第一步，如果是必须填的，则要在文本款后面加上* 12 $("form :input.required").each(function () { 13 var $required = $("<strong class='high'>*</strong>"); //创建元素 14 $(this).parent().append($required); //然后将它追加到到文档中 15 }); 16 17 //文本框失去焦点的时候 18 $("form :input").blur(function () { 19 20 var $parent = $(this).parent(); 21 $parent.find(".formtips").remove(); 22 23 //验证用户名 24 if ($(this).is("#uname")) {//判断是否是用户名 25 if (this.value == "" || this.value.length < 6) { 26 27 var errorMsg = "请输入至少6位的用户名"; 28 $parent.append("<strong class='formtips onError'>" + errorMsg + "</strong>"); 29 30 } else { 31 32 var okMsg = "输入正确"; 33 $parent.append("<strong class='formtips onSuccess'>" + okMsg + "</strong>"); 34 } 35 } 36 37 //验证邮件 38 if ($(this).is("#email")) {//判断是否是邮件 39 //邮箱的正则表达式 40 if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}/.test(this.value))) { 41 42 var errorMsg = "请输入正确的邮箱地址"; 43 $parent.append("<strong class='formtips onError'>" + errorMsg + "</strong>"); 44 45 } else { 46 47 var okMsg = "输入正确"; 48 $parent.append("<strong class='formtips onSuccess'>" + okMsg + "</strong>"); 49 } 50 51 52 } 53 54 55 }).keyup(function () {//添加键盘按下事件是为了及时提醒用户 56 57 $(this).triggerHandler("blur"); 58 59 }).focus(function () {//获得焦点的事件 60 61 $(this).triggerHandler("blur"); 62 63 }); 64 65 //提交 66 $("#submit").click(function () { 67 68 $("form :input.required").trigger("blur"); 69 70 var numError = $("form .onError").length; 71 72 if (numError) { 73 74 return false; 75 76 } 77 alert("注册成功,密码已经发送到你的邮箱中，请注意查收..."); 78 79 return; 80 81 }); 82 83 //重置 84 $("#reset").click(function () { 85 $(".formtips").remove() 86 }); 87 88 }); 89 </script> 90 91 <!-- 样式表--> 92 <style type="text/css"> 93 body 94 { 95 font:12px/17px Arial,Helvetica,sans-serif; 96 color:#666; 97 } 98 form div 99 { 100 margin:5px 0; 101 } 102 .input label 103 { 104 float:left; 105 width:100px; 106 text-align:right; 107 } 108 .input input 109 { 110 padding:1px 1px; 111 border:1px solid #ccc; 112 height:16px; 113 } 114 .sub 115 { 116 padding-left:100px; 117 118 } 119 .sub input 120 { 121 margin-right:10px; 122 } 123 .formtips 124 { 125 width:200px; 126 margin:2px; 127 padding:2px; 128 } 129 .onError 130 { 131 background:#ffe0e9; 132 padding-left:25px; 133 } 134 .onSuccess 135 { 136 background-color:pink; 137 padding-left:25px; 138 } 139 .high 140 { 141 color:Gray; 142 } 143 #submit 144 { 145 width:50px; 146 height:20px; 147 } 148 149 150 </style> 151 </head> 152 <body> 153 <form method="post" action=""> 154 <div style="margin-left:60px"><h4>找回密码</h4></div> 155 <div class="input"> 156 <label for="uname">用户名:</label> 157 <input type="text" id="uname" class="required"/> 158 </div> 159 <div class="input"> 160 <label for="email">邮箱:</label> 161 <input type="text" id="email" class="required"/> 162 </div> 163 <div class="sub"> 164 <input type="submit" value="提交" id="submit" /> 165 <input type="reset" value="重置" id="reset" /> 166 </div> 167 </form> 168 169 </body> 170 </html>