一个简单的表单验证

     学了一点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>

 

posted @ 2012-09-21 18:01  全力以赴001  阅读(994)  评论(0)  编辑  收藏  举报