  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <script src="jquery.js"></script>
  7     <style>
  8         table{
  9             /*width: 500px;*/
 10             height: 200px;
 11             border-collapse: collapse;
 12             border-color: #f00;
 13         }
 14         td{
 15             border: 1px solid #00f;
 16         }
 17         td:nth-child(1){
 18             width: 100px;
 19         }
 20         td:nth-child(2){
 21             width: 200px;
 22         }
 23         
 24         td:nth-child(3){
 25             border: 0px;
 26             display: none;
 27         }
 28     </style>
 29 </head>
 30 <body>
 31     <form id="form1" action="regist.php" method="get">
 32         <table >
 33             <tr>
 34                 <td>用户名</td>
 35                 <td><input type="text" name="username">
 36                 <!-- <span>hahahahah</span> -->
 37                 </td>
 38                 <td><span>用户名至少6位！</span></td>
 39                 
 40             </tr>
 41             <tr>
 42                 <td>密码</td>
 43                 <td><input type="text" name="password"></td>
 44                 <td><span>密码至少6位！</span></td>
 45             </tr>
 46             <tr>
 47                 <td>重复密码</td>
 48                 <td><input type="text" name="repassword"></td>
 49                 <td><span>两次密码不一致！</span></td>
 50             </tr>
 51             <tr>
 52                 <td>手机</td>
 53                 <td><input type="text" name="phone"></td>
 54                 <td><span>手机号格式不正确！</span></td>
 55             </tr>
 56             <tr>
 57                 <td>邮箱</td>
 58                 <td><input type="text" name="email"></td>
 59                 <td><span>邮箱格式不正确！</span></td>
 60             </tr>
 61             <tr>
 62                 <td colspan="2" align="center"><input type="submit" value="提交"></td>
 63             </tr>
 64 
 65         </table>
 66     </form>
 67 </body>
 68 <script>
 69     var check1=check2=check3=check4=check5=0;
 70     $('[name=username]').blur(function(){
 71         if ($(this).val().length<6) {
 72             $(this).parent().next().show();
 73             check1 = 0;
 74         }else{
 75             $(this).parent().next().hide();
 76             check1 = 1;
 77         }
 78     });
 79     $('[name=password]').blur(function(){
 80         if ($(this).val().length<6) {
 81             $(this).parent().next().show();
 82             check2 = 0;
 83         }else{
 84             $(this).parent().next().hide();
 85             check2 = 1;
 86         }
 87     });
 88     $('[name=repassword]').blur(function(){
 89         if ($(this).val()!=$('[name=password]').val()) {
 90             $(this).parent().next().show();
 91             check3 = 0;
 92         }else{
 93             $(this).parent().next().hide();
 94             check3 = 1;
 95         }
 96     });
 97     $('[name=phone]').blur(function(){
 98         if (!$(this).val().match(/^188\d{8}$/)) {
 99             $(this).parent().next().show();
100             check4 = 0;
101         }else{
102             $(this).parent().next().hide();
103             check4 = 1;
104         }
105     });
106     $('[name=email]').blur(function(){
107         if (!$(this).val().match(/^\w+\@\w+\.com$/)) {
108             $(this).parent().next().show();
109             check5 = 0;
110         }else{
111             $(this).parent().next().hide();
112             check5 = 1;
113         }
114     });
115 
116     $('#form1').submit(function(){
117         $('input').blur();
118         var sum = check1+check2+check3+check4+check5;
119         if(sum!=5){
120             return false;
121         }
122         
123     });
124 </script>
125 </html>
posted on 2017-01-01 14:01 Jacklovely 阅读(221) 评论(0) 编辑收藏举报
刷新页面返回顶部
导航
