jquery非常简单入门的登录案例

非常简单的入门案例，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 //        失去焦点时，若值为空，则值等于默认值，也就是placeholder
12         if(point.value == ‘‘){
13             point.value = point.defaultValue;
14         }
15     }
16
17     $(function(){
18 //        若验证正确，则为true,最后判断是否能提交
19         var isPwd = false
20         var isUser = false;
21         $(‘.username‘).blur(function(){
22 //            正则表达式，验证用户名
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>