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>
JQ实现表单校验
猜你喜欢
转载自www.cnblogs.com/yxfyg/p/12684406.html
今日推荐
周排行