关于jQuery表单校验的应用 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7         <title>表单校验</title>
 8         <meta name="author" content="Administrator" />
 9         <script type="text/javascript" src="script/jquery-1.12.2.js"></script>
10         <style type="text/css">
11             .int {
12                 margin-bottom: 5px;
13             }
14             .sub {
15                 padding-left: 7%;
16             }
17         </style>
18         <!-- Date: 2016-04-03 -->
19     </head>
20     <body>
21         <form action="" method="post">
22             <div class="int">
23                 <label for="username">用户名：</label>
24                 <input type="text" id="username" class="required" />
25             </div>
26 
27             <div class="int">
28                 <label for="email">&nbsp;邮箱：</label>
29                 <input type="text" id="email" class="required" />
30             </div>
31 
32             <div class="int">
33                 <label for="personinfo">个人资料</label>
34                 <input type="text" id="personinfo" />
35             </div>
36 
37             <div class="sub">
38                 <input type="submit" value="提交" id="send" />
39                 <input type="reset" id="res" />
40             </div>
41         </form>
42         <script type="text/javascript">
43             $(function() {
44                 //为必填的内容加*。
45                 $("form :input.required").each(function() {
46                     var $required = $("<strong class='high'>*</strong>");
47                     $(this).parent().append($required);
48                 });
49                 //为每个文本框失去焦点时做校验。
50                 $("form :input").blur(function() {
51                     var $parent = $(this).parent();
52                     $parent.find(".formtips").remove();
53                     //验证用户名
54                     if($(this).is("#username")){
55                         if(this.value==""||this.value.length<6){
56                             var errorMsg = "请输入至少6位的用户名。";
57                             $parent.append("<span class='formtips onError'>"+ errorMsg+"</span>");
58                         }else{
59                             var okMsg = "输入正确";
60                             $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
61                         }
62                     }
63                     //验证邮箱
64                     if($(this).is("#email")){
65                         if(this.value==""||(this.value!=""&& !/.+@.+\.[a-zA-Z] {2,4}$/.test(this.value))){
66                             var errorMsg = "请输入正确的邮箱地址。";
67                             $parent.append("<span class='formtips onError'>"+ errorMsg+"</span>");
68                         }else{
69                             var okMsg = "请输入正确的邮箱地址。";
70                             $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
71                         }
72                     }
73                 });
74             });
75         </script>
76     </body>
77 </html>

 

posted @ 2016-04-03 10:51  Arther_J  阅读(210)  评论(0)    收藏  举报