-
移动开发
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
白羽
2018-07-03
来源 ：网络
阅读 1162
评论 0
摘要：本文将带你了解WebApp开发之注册页面的注意事项，希望本文对大家学WebApp有所帮助。
注意点一：
在定义类似于“输入手机号码”+左边为“输入验证码”，则要运用定位i额，将input覆盖一部分
圆角问题也是需要单独设置
注意点二：
一般字体我们运用白色字体，会比黑色字体好看
注意点三：
响应式WebApp，在哪个平台上隐藏哪块部分，则添加.hidden-lg/md/sm/xs等
下面是HTML代码
[html] view plain copy
1. <!DOCTYPE html>
2. <html lang="zh-CN">
3. <head>
4. <meta charset="utf-8">
5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
6. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
7. <title>注册页面</title>
8. <link href="css/bootstrap.css" rel="stylesheet">
9. <link rel="stylesheet" href="css/validator.css"/>
10. <script src="js/jquery-2.0.3.min.js"></script>
11. <script src="js/validator.js"></script>
12. </head>
13. <body>
14. <div class="navbar">
15. <div class="container">
16. <div class="row">
17. <div class="col-md-4 hidden-xs hidden-sm"></div>
18. <div class="col-md-4 col-sm-12 register">
19. <div class="tip">
20. <div class="text">注册即送现金抵扣券规则说明</div>
21. <img src="img/img.jpg" alt=""/>
22. </div>
23. <form id="myform" name="myform" onsubmit="return formValidator();">
24. <table>
25. <tr>
26. <td><input type="text" id="pnumber" placeholder="输入您的手机号码"></td>
27. <td id="getValidator">获取验证码</td>
28. </tr>
29. <tr>
30. <!-- 显示提示内容 -->
31. <td><div id="pnumberTip"></div></td>
32. </tr>
33. <tr>
34. <td colspan="2"><input type="text" id="number" placeholder="输入验证码"/></td>
35. </tr>
36. <tr>
37. <td><div id="numberTip"></div></td>
38. </tr>
39. <tr>
40. <td colspan="2"><input type="password" id="pwd" placeholder="输入密码"></td>
41. </tr>
42. <tr>
43. <td><div id="pwdTip"></div></td>
44. </tr>
45. <tr>
46. <td colspan="2"><input type="password" id="repwd" placeholder="确认密码"></td>
47. </tr>
48. <tr>
49. <td><div id="repwdTip"></div></td>
50. </tr>
51. <tr>
52. <td colspan="2"><input type="submit" id="submit" value="提交"></td>
53. </tr>
54. </table>
55. </form>
56. </div>
57. <div class="col-md-4 hidden-xs hidden-sm"></div>
58. </div>
59. </div>
60. </div>
61. </body>
62. </html>
下面是JS代码
[javascript] view plain copy
1. function pnumberValidator(){
2. //定义正则表达式
3. var regExp=/^[0-9]{11}$/;
4. var $myval=$("#pnumber").val();
5. //a.不能为空
6. if($myval==""||$myval==null){
7. $("#pnumberTip").text("手机号不能为空").css({
8. "color":"red",
9. "font-weight":"bold"
10. });
11. return false;
12. }
13. //b.长度为11位的有效手机号
14. else if(!regExp.test($myval)){
15. $("#pnumberTip").text("手机号输入错误").css({
16. "color":"red",
17. "font-weight":"bold"
18. });
19. return false;
20. }
21. //输入正确
22. else{
23. $("#pnumberTip").text("手机号输入正确").css({
24. "color":"#ffccff",
25. "font-weight":"bold"
26. });
27. return true;
28. }
29. }
30. function numberValidator(){
31. //a.验证码不能为空
32. var $number=$("#number").val();
33. if($number==""||$number==null){
34. $("#number").text("验证码不能为空").css({
35. "color":"red",
36. "font-weight":"bold"
37. });
38. return false;
39. }else if(!regExp.text($number)){
40. $("#number").text("验证码输入错误").css({
41. "color":"red",
42. "font-weight":"bold"
43. });
44. return false;
45. }else{
46. $("#pwdTip").text("密码输入正确").css({
47. "color":"#ffccff",
48. "font-weight":"bold"
49. });
50. return true;
51. }
52. }
53. function mypwdValidator(){
54. //a.密码不能为空
55. var $mypwd=$("#pwd").val();
56. var regExp=/^[a-zA-Z]{6,8}$/;
57. if($mypwd==""||$mypwd==null){
58. $("#pwdTip").text("密码不能为空").css({
59. "color":"red",
60. "font-weight":"bold"
61. });
62. return false;
63. }else if(!regExp.test($mypwd)){
64. $("#pwdTip").text("密码输入错误").css({
65. "color":"red",
66. "font-weight":"bold"
67. });
68. return false;
69. }else{
70. $("#pwdTip").text("密码输入正确").css({
71. "color":"#ffccff",
72. "font-weight":"bold"
73. });
74. return true;
75. }
76. }
77.
78. function remypwdValidator(){
79. //a.密码不能为空
80. var $mypwd=$("#pwd").val();
81. var $remypwd=$("#repwd").val();
82. var regExp=/^[a-zA-Z]{6,8}$/;
83. if($remypwd==""||$remypwd==null){
84. $("#repwdTip").text("密码不能为空").css({
85. "color":"red",
86. "font-weight":"bold"
87. });
88. return false;
89. }else if(!regExp.test($remypwd)){
90. $("#repwdTip").text("密码输入错误").css({
91. "color":"red",
92. "font-weight":"bold"
93. });
94. return false;
95. }else if($remypwd!=$mypwd){
96. $("#repwdTip").text("密码输入错误").css({
97. "color":"red",
98. "font-weight":"bold"
99. });
100. return false;
101. }else{
102. $("#repwdTip").text("密码输入正确").css({
103. "color":"#ffccff",
104. "font-weight":"bold"
105. });
106. return true;
107. }
108. }
109. $(function(){
110. //1 手机号码验证
111. $("#pnumber").focus(function(){
112. $("#pnumberTip").text("请输入有效的手机号码").css({
113. "color" : "black",
114. "font-weight" : "normal"
115. });
116. }).blur(pnumberValidator);
117. //2 密码验证
118. $("#pwd").focus(function(){
119. $("#pwdTip").text("密码要求输入英文，且长度在6-8之间").css({
120. "color":"black",
121. "font-weight":"normal"
122. });
123. }).blur(mypwdValidator);
124. //3 密码验证
125. $("#pwd").focus(function(){
126. $("#pwdTip").text("密码要求输入英文，且长度在6-8之间").css({
127. "color":"black",
128. "font-weight":"normal"
129. });
130. }).blur(mypwdValidator);
131. $("#repwd").focus(function(){
132. $("#repwdTip").text("密码要求输入英文，且长度在6-8之间").css({
133. "color":"black",
134. "font-weight":"normal"
135. });
136. }).blur(mypwdValidator);
137. //3 密码验证
138. $("#repwd").focus(function(){
139. $("#repwdTip").text("密码要求输入英文，且长度在6-8之间").css({
140. "color":"black",
141. "font-weight":"normal"
142. });
143. }).blur(remypwdValidator);
144. })
145. function formValidator(){
146. // 判断表单内所有元素验证全部通过
147. if(pnumberValidator()&&numberValidator()&&mypwdValidator()&&remypwdValidator()){
148. alert("表单验证成功!");
149. //return true;
150. }else{
151. alert("表单验证失败!");
152. //return false;
153. }
154. }
下面是自己定义的一些CSS
[css] view plain copy
1. input{
2. border:1px solid transparent;
3. border-color: #ccc;
4. border-radius: 4px;
5. }
6. div.navbar{
7. border:1px solid #000;
8. width:100%;
9. height:100%;
10. }
11. .row{
12. margin:0 auto;
13. }
14. .tip{
15. top:0;
16. left:0;
17. z-index:-2;
18. }
19. .text{
20. font-size:16px;
21. font-weight: bold;
22. color: #fff;
23. font-family: "Microsoft YaHei";
24. position: absolute;
25. top:0px;
26. margin-left:15px;
27. width:341px;
28. height:30px;
29. line-height:30px;
30. text-align:center;
31. background:#67b168;
32. left:0;
33. z-index:1;
34. }
35. form{
36. display:block;
37. margin-top:20px;
38. margin-left:20px;
39. }
40. #pnumber{
41. width:300px;
42. height:30px;
43. margin-bottom:20px;
44. }
45. #getValidator{
46. display: block;
47. width:105px;
48. height:30px;
49. text-align: center;
50. line-height:30px;
51. background: #67b168;
52. }
53. #number,#pwd,#repwd,#submit{
54. font-size:16px;
55. width:300px;
56. height:30px;
57. line-height:30px;
58. margin-bottom:20px;
59. }
60. #submit{
61. background: #67b168;
62. color: #fff;
63. font-weight: bold;
64. }
65. td>div{
66. width:200px;
67. }
68. #pnumber{
69. top:0;
70. left:0px;
71. z-index:-2;
72. }
73. #getValidator{
74. position:relative;
75. border-top-right-radius:4px;
76. border-bottom-right-radius: 4px;
77. top:0;
78. left:-105px;
79. z-index:1;
80. color:#fff;
81. font-weight: bold;
82. }
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
