jquery非常簡單入門的登入案例

標籤：div   lis   判斷   .com   焦點   out   remove   表達   lin   

非常簡單的入門案例，jquery實現驗證。

使用者名稱13 14 15 16開頭，以8 9 結束，總共11位

密碼 a-z,A-Z,0-9 ，! # $ % ^ & * . ~等這些， 在6-22位

 

 1 *{ 2     margin:0; 3     padding:0; 4 } 5 form{ 6     border:1px solid #303a40; 7     width: 400px; 8     height: 300px;; 9     margin:200px auto;10 }11 ul{12     margin:40px auto;13 }14 li{15     list-style:none;16     height:30px;17     text-align: center;18     margin-bottom:20px;19 }20 li span{21     display: block;22     color:#ff6633;23     font-size: 12px;24 }25 .error-border{26     border:1px solid #ff6633;27 }28 .success-border{29     border:1px solid #2eff37;30 }31 .submit{32     margin:0 auto;33     height: 34px;34     text-align: center;35     /*background-color: #ff6633;*/36 }37 .submit input{38     outline:none;39     border-color:#ff6633 ;40     background-color: #ff6633;41     color:#fff;42     font-size:26px;43     border-style:none;44     margin:0 auto;45     width: 250px;46     height: 34px;47     display: inline-block;48     text-align: center;49 }

 

 1 <form action=""> 2     <ul class=‘logging‘> 3         <li> 4             <label for="">使用者名稱</label> 5             <input class="username" type="text" placeholder="請輸入使用者名稱" onfocus="focusFun(this)" onblur="blurFun(this)" maxlength="11"><span></span> 6         </li> 7         <li> 8             <label for="">密&nbsp;碼</label> 9             <input class="password" type="password" placeholder="請輸入密碼"><span class="error"></span>10         </li>11     </ul>12     <div class="submit">13         <input type="submit" value="立即登入">14     </div>15 </form>

 

 1 <script src="./js/jquery.min.js"></script> 2 <script> 3     function focusFun(point){ 4 //        觸發焦點，若輸入的值跟預設值一樣，輸入的值為空白 5         if(point.defaultValue == point.value){ 6             point.value = ‘‘; 7  8         } 9     }10     function blurFun(point){11 //        失去焦點時，若值為空白，則值等於預設值，也就是placeholder12         if(point.value == ‘‘){13             point.value = point.defaultValue;14         }15     }16 17     $(function(){18 //        若驗證正確，則為true,最後判斷是否能提交19         var isPwd = false20         var isUser = false;21         $(‘.username‘).blur(function(){22 //            Regex，驗證使用者名稱23 //            使用者名稱要1開頭，第二位是3或4或5或6，最後一位以8或9結束，一共要11位24             reg=/^1[3|4|5|6][0-9]\d{8,9}$/i;25             if($(this).val() == ‘‘ || $(this).val()  == ‘請輸入您的帳號‘){26                 $(‘.username‘).next().html(‘賬戶不可為空！‘);27                 $(‘.username‘).addClass(‘error-border‘);28 29             }30             else if($(‘.username‘).val().length < 11){31                 $(‘.username‘).next().html(‘長度錯誤‘);32                 $(‘.username‘).addClass(‘error-border‘);33             }else if(!reg.test($(‘.username‘).val())){34                 $(‘.username‘).next().html(‘賬戶不存在！‘);35                 $(‘.username‘).addClass(‘error-border‘);36             }else{37                 $(‘.username‘).removeClass(‘error-border‘);38                 $(‘.username‘).addClass(‘success-border‘);39                 $(this).next().empty();40                 isUser = true;41             }42 43         });44 45         $(‘.password‘).blur(function(){46 //            密碼要a-z(大小寫),1-9，總共6-22位47 //            正則可以先瞭解48             reg=/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;49             if($(this).val() == ‘‘){50                 $(this).addClass(‘error-border‘);51                 $(this).next().html(‘密碼不可為空‘);52             }else if(!reg.test($(this).val())){53                 $(this).addClass(‘error-border‘);54                 $(this).next().html(‘密碼格式不對！‘);55             }else {56                 $(this).addClass(‘success-border‘);57                 $(this).removeClass(‘error-border‘);58                 $(this).next().empty();59                 isPwd = true;60             }61         });62 63         $(‘form‘).submit(function(){64 //            使用者名稱密碼驗證通過則提交，驗證不通過不提交65             if(isPwd && isUser){66                 alert(‘提交成功！‘)67             }else{68                 return;69             }70         })71 72 73 74 75     })76 </script>

 

jquery非常簡單入門的登入案例