JQ实现表单校验 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>JQ校验</title>
  6         <style>
  7             .tips{
  8                 width:16px;
  9                 vertical-align:middle;
 10             }
 11             
 12             .blue{
 13                 color: blue;
 14                 font-size: 12px;
 15             }
 16             
 17             .red{
 18                 color: red;
 19                 font-size: 12px;
 20             }
 21             
 22             .green{
 23                 color: greenyellow;
 24                 font-size: 12px;
 25             }
 26         </style>
 27         <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
 28         <script>
 29             $(function(){
 30                 $(".import").after("<font color='red'>*</font>");
 31                 
 32                 $("input").focus(function(){
 33                     $(this).parent().find(".tips").remove();
 34                     $(this).parent().find("span").remove();//不要乱用链式调用
 35                     
 36                     if($(this).is("#username")){
 37                         $(this).parent().append("<img src='../img/2.jpg' class='tips'/>");
 38                         $(this).parent().append("<span><font class='blue'>用户名不得少于六位</font></span>");
 39                     }
 40                     
 41                     if($(this).is("#password")){
 42                         $(this).parent().append("<img src='../img/2.jpg' class='tips'/>");
 43                         $(this).parent().append("<span><font class='blue'>密码不得少于八位</font></span>");
 44                     }
 45                     
 46                     if($(this).is("#repassword")){
 47                         $(this).parent().append("<img src='../img/2.jpg' class='tips'/>");
 48                         $(this).parent().append("<span><font class='blue'>两次输入的密码必须一致</font></span>");
 49                     }
 50                 });
 51                 
 52                 $("input").blur(function(){
 53                     $(this).parent().find(".tips").remove();
 54                     $(this).parent().find("span").remove();//不要乱用链式调用
 55                     
 56                     if($(this).is("#username")){
 57                         if(this.value.length<6){
 58                             $(this).parent().append("<img src='../img/3.jpg' class='tips'/>");
 59                             $(this).parent().append("<span><font class='red'>用户名太短！</font></span>");
 60                         }else{
 61                             $(this).parent().append("<img src='../img/4.jpg' class='tips'/>");
 62                             $(this).parent().append("<span><font class='green'>用户名可用！</font></span>");
 63                         }
 64                     }
 65                     
 66                     if($(this).is("#password")){
 67                         if(this.value.length<8){
 68                             $(this).parent().append("<img src='../img/3.jpg' class='tips'/>");
 69                             $(this).parent().append("<span><font class='red'>密码太短！</font></span>");
 70                         }else{
 71                             $(this).parent().append("<img src='../img/4.jpg' class='tips'/>");
 72                             $(this).parent().append("<span><font class='green'>密码可用！</font></span>");
 73                         }
 74                     }
 75                     
 76                     if($(this).is("#repassword")){
 77                         if(this.value == $("#password").val()){
 78                             $(this).parent().append("<img src='../img/4.jpg' class='tips'/>");
 79                             $(this).parent().append("<span><font class='green'>密码一致！</font></span>");
 80                         }else{
 81                             $(this).parent().append("<img src='../img/3.jpg' class='tips'/>");
 82                             $(this).parent().append("<span><font class='red'>密码不一致！</font></span>");
 83                         }
 84                     }
 85                     
 86                     if($(this).is("#phone")){
 87                         if(!/^[1][3578][0-9]{9}$/.test(this.value)){
 88                             $(this).parent().append("<img src='../img/3.jpg' class='tips'/>");
 89                             $(this).parent().append("<span><font class='red'>该号码不可用！</font></span>");
 90                         }else{
 91                             $(this).parent().append("<img src='../img/4.jpg' class='tips'/>");
 92                             $(this).parent().append("<span><font class='green'>号码可用！</font></span>");
 93                         }
 94                     }
 95                     
 96                     if($(this).is("#email")){
 97                         if(!/^[\w.-]+@[\w.-]+\.\w+$/.test(this.value)){
 98                             $(this).parent().append("<img src='../img/3.jpg' class='tips'/>");
 99                             $(this).parent().append("<span><font class='red'>邮箱格式错误！</font></span>");
100                         }else{
101                             $(this).parent().append("<img src='../img/4.jpg' class='tips'/>");
102                             $(this).parent().append("<span><font class='green'>邮箱可用！</font></span>");
103                         }
104                     }
105                 });
106                 
107                 $("input").keyup(function(){
108                     $(this).triggerHandler("blur");
109                 });
110                 
111                 $("form").submit(function(){
112                     $(".import").trigger("blur");
113                     if($(".import~span .red").length>0){
114                         return false;
115                     }else{
116                         return true;
117                     }
118                 });
119             });
120         </script>
121     </head>
122     <body>
123         <div>
124             <form action="../并不存在的HTML.html" method="get">
125                 <table>
126                     <tr>
127                         <td>用户名</td>
128                         <td>
129                             <input type="text" id="username" class="import"/>
130                         </td>
131                     </tr>
132                     <tr>
133                         <td>密码</td>
134                         <td>
135                             <input type="password" id="password" class="import"/>                        </td>
136                     </tr>
137                     <tr>
138                         <td>确认密码</td>
139                         <td>
140                             <input type="password" id="repassword" class="import"/>                        </td>
141                     </tr>
142                     <tr>
143                         <td>手机号码</td>
144                         <td>
145                             <input type="text" id="phone"/>                        
146                         </td>
147                     </tr>
148                     <tr>
149                         <td>邮箱</td>
150                         <td>
151                             <input type="text" id="email"/>                        
152                         </td>
153                     </tr>
154                     <tr>
155                         <td></td>
156                         <td>
157                             <input type="submit" value="提交" />                        
158                         </td>
159                     </tr>
160                 </table>
161             </form>
162         </div>
163     </body>
164 </html>

 

posted @ 2020-04-12 11:43  yxfyg  阅读(204)  评论(0)    收藏  举报