jquery mobile两个页面以及源码(登录与注册)

本文详细介绍了微笔记平台的登录与注册流程,包括核心代码解析、输入事件处理及验证逻辑,帮助开发者理解并实现类似功能。

先上图:

登录:

注册:

登录核心代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
< script type = "text/javascript" >
      jQuery(document).ready(function() {
         //输入事件
         $("input[id]").bind("focus",function () {
         if($(this).attr("id")=='username'||$(this).attr("id")=='password')
         $(this).attr("value","");
         });
         //提交
         $("#submit").bind("click", function() {
               if (valid()) {
                 $.ajax({
                    type: "POST",
                    url: "http://localhost:8080/note/servlet/Login",
                    data: $("form#loginform").serialize(),
                    success: function(msg){
                      if(msg=='success'){
                         $.mobile.changePage("content/first.html","slidedown", true, true);
                      }else{
                         $.mobile.changePage("content/loginfalse.html","slidedown", true, true);
                      }
                      
                    }
                 });
               }
             });
         });
         //输入信息验证
         function valid(){
             if($("#username").attr("value")==''||$("#password").attr("value")=='')
             {
                 $.mobile.changePage("content/loginfalse.html","slidedown", true, true);
                 return false;          
             }
             return true;
         };
     </ script >
     
     < style type = "text/css" >
     p {
         font-size: 1.5em;
         font-weight: bold;
     }
     #submit{
         float:right; margin:10px;
     }
     #toregist{
         float:left; margin:10px;
     }
     </ style >
< body >
 
<!-- begin first page -->
< section id = "page1" data-role = "page" >
   < header data-role = "header"  data-theme = "b" >< h1 >开始笔记之旅</ h1 ></ header >
   < div data-role = "content" class = "content" >
     < p style = "backg" >< font color = "#2EB1E8" >登录微笔记</ font ></ p >
         < form method = "post" id = "loginform" >
             < input type = "text" name = "username" id = "username" value = "用户名" />< br >
             < input type = "password" name = "password" id = "password" value = "密码输入提示" />
                     < fieldset data-role = "controlgroup" >
                         < input type = "checkbox" name = "checkbox-1" id = "checkbox-1" class = "custom" />
                         < label for = "checkbox-1" >保持登录状态</ label >
                     </ fieldset >
             < a href = "content/regist.html" data-role = "button" id = "toregist" data-theme = "e" >注册</ a >
             < a data-role = "button" id = "submit" data-theme = "b" >登录</ a >
         </ form >
   </ div >
   < footer data-role = "footer" >< h1 >©2011 TinyNote 微笔记社区(movingcomputing.com)</ h1 ></ footer >
</ section >
<!-- end first page -->
 
 
 
</ body >

注册核心代码:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
< script type = "text/javascript" >
      jQuery(document).ready(function() {
         //输入事件
         $("input[id]").bind("focus",function () {
         if($(this).attr("value")=='用户名'||$(this).attr("value")=='密码')
         $(this).attr("value","");
         });
         //提交
         $("#regist").bind("click", function() {
               if (true) {
                 $.ajax({
                    type: "POST",
                    url: "http://localhost:8080/note/servlet/Login",
                    data: $("form#loginform").serialize(),
                    success: function(msg){
                      if(msg=='success'){
                         $.mobile.changePage("../content/first.html","slidedown", true, true);
                      }else{
                         $.mobile.changePage("../content/loginfalse.html","slidedown", true, true);
                      }
                      
                    }
                 });
               }
             });
         });
     </ script >
     
     < style type = "text/css" >
     p {
         font-size: 1.5em;
         font-weight: bold;
     }
     header div{
         font-size: 1.5em;
     }
     #regist{
         width:150px;
         height:50px;
         margin :5px;
     }
     </ style >
     
< body >
 
<!-- begin first page -->
< section data-role = "page" >
   < header data-role = "header"  data-theme = "b"  data-type = "horizontal" >
     < div data-role = "controlgroup" >
         < nav data-role = "navbar" >
             < ul >
                 < li >< a href = "#page1" class = "ui-btn-active" >注册微笔记</ a ></ li >
                 < li >< a href = "#page2" >用手机号注册</ a ></ li >
             </ ul >
          </ nav >
     </ div >
   </ header >
   < div data-role = "content" class = "content" >
         < form method = "post" id = "registform" >
         < label for = "email" >邮 箱</ label >
         < input type = "text" name = "email" id = "email" />
         < label for = "password" >密 码</ label >
         < input type = "password" name = "password" id = "password" />
         < label for = "nicky" >昵 称</ label >
         < input type = "text" name = "nicky" id = "nicky" />
         < fieldset data-role = "controlgroup" >
             < legend >身 份:</ legend >
             < input type = "radio" name = "radio-choice-1" id = "radio-choice-1" value = "choice-1" checked = "checked" />
             < label for = "radio-choice-1" >上班族</ label >
 
             < input type = "radio" name = "radio-choice-1" id = "radio-choice-2" value = "choice-2"  />
             < label for = "radio-choice-2" >大学生</ label >
 
             < input type = "radio" name = "radio-choice-1" id = "radio-choice-3" value = "choice-3"  />
             < label for = "radio-choice-3" >其他</ label >
         </ fieldset >
             < center >
                 < a data-role = "button" id = "regist" data-theme = "e" >立即注册</ a >
             </ center >
         </ form >
   </ div >
</ section >
<!-- end first page -->
</ body >



From: http://www.oschina.net/question/101738_29271


评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值