请选择 进入手机版 | 继续访问电脑版
设为首页 收藏本站
开启辅助访问 切换到宽版

新浪微博登陆

只需一步, 快速开始

QQ登录

只需一步,快速开始

切换风格 立即注册 找回密码

Java教程网

查看: 45351|回复: 34

SSH当当网

[复制链接]

新浪微博达人勋

812

积分

445

帖子

49

贡献

Rank: 4

积分
812

社区QQ达人

发表于 2016-3-25 18:18:20 | 显示全部楼层 |阅读模式
代码如下
  1. var email_flag=false;
  2. var nickname_flag = false;
  3. var password_flag = false;
  4. var verifyCode_flag = false;
  5. //(1)检测邮箱
  6. $(function(){
  7. //1:判断邮箱是否为空
  8. $('#txtEmail').blur(function(){
  9. $('#email\\.info').html('');
  10. var email = $('#txtEmail').val();
  11. if(email==""){
  12. $('#email\\.info').html('邮箱不能为空');
  13. return;
  14. }
  15. //2:判断邮箱格式
  16. var Email_reg=/^[a-zA-Z0-9_+.-]+\@([a-zA-Z0-9-]+\.)+[a-zA-Z0-9]{2,4}$/;
  17. if(!Email_reg.test(email)){
  18. $('#email\\.info').html('邮箱格式不正确');
  19. return;
  20. }
  21. //3:判断邮箱唯一性
  22. $.post(
  23. 'checkEmail.action',
  24. {'email':email},
  25. function(date){
  26. if(date){
  27. $('#email\\.info').html('邮箱可以用');
  28. email_flag=true;
  29. }else{
  30. $('#email\\.info').html('邮箱已经被占用');
  31. email_flag=false;
  32. }
  33. }
  34. );

  35. });
  36. });
  37. //(2)检测用户名
  38. $(function(){

  39. $('#txtNickName').blur(function(){
  40. $('#name\\.info').html("");
  41. var nickname = $('#txtNickName').val();
  42. //0:判断字符長度
  43. var len = 0;
  44. for(var i=0;i<nickname.length;i++){
  45. var length = nickname.charCodeAt(i);
  46. if(length>=0&&length<=128){
  47. len+=1;
  48. }else{
  49. len+=2;
  50. }
  51. }
  52. //1:判断用户名是否为空
  53. if(nickname==""){
  54. $('#name\\.info').html('用户名不能为空');
  55. return;
  56. }
  57. //2:检测有户名是否合法
  58. var nickname_reg =/^[0-9a-zA-Z\S\W]{2,18}$/;
  59. if(nickname_reg.test(nickname)&&len>=4){
  60. nickname_flag=true;
  61. }else{
  62. $('#name\\.info').html('用户名不合法');
  63. }

  64. });
  65. });
  66. //(3)检测密码
  67. $(function(){

  68. $('#txtPassword').blur(function(){
  69. $('#password\\.info').html('');
  70. var password = $('#txtPassword').val();
  71. //1:检测密码是否为空
  72. if(password==""){
  73. $('#password\\.info').html('密码不能为空');
  74. return;
  75. }
  76. //2:检测密码格式是否正确
  77. var password_reg = /^[a-zA-Z\d+]{6,20}$/;
  78. if(!password_reg.test(password)){
  79. $('#password\\.info').html('密码不符合规则');
  80. return;
  81. }

  82. });
  83. $('#txtRepeatPass').blur(function(){
  84. $('#password1\\.info').html('');
  85. var password = $('#txtPassword').val();
  86. var repeatPass = $('#txtRepeatPass').val();
  87. //3:检测第二次输入的密码是否于第一次的相等
  88. if(repeatPass!=password){
  89. $('#password1\\.info').html('两次输入的密码不一样');
  90. return;
  91. }else{
  92. password_flag = true;
  93. }
  94. });
  95. });

  96. //(4)校验验证码
  97. $(function(){
  98. $('#change').click(function(){
  99. $('#imgVcode').attr('src','verifyCode?dt='+new Date().getTime());
  100. });
  101. });

  102. //检查输入的code是否正确
  103. $(function(){
  104. $("#txtVerifyCode").blur(function(){
  105. //焦点离开后,发送ajax请求
  106. $('#number\\.info').html('');
  107. var verifyCode = $('#txtVerifyCode').val();
  108. //判断是否为空
  109. if(verifyCode==""){
  110. $('#number\\.info').html('验证码不能为空');
  111. return;
  112. }
  113. //检测验证码是否正确
  114. $.post(
  115. 'checkCode.action',
  116. {'verifyCode':verifyCode},
  117. function(date){
  118. if(date.ok){
  119. $('#number\\.info').html('验证码正确');
  120. verifyCode_flag = true;
  121. }else{
  122. $('#number\\.info').html('验证码错误');
  123. }
  124. }
  125. );

  126. });
  127. });
  128. //(5)表单验证
  129. $(function(){
  130. $('#regist_form').submit(function(){
  131. var flag = email_flag&&nickname_flag&&password_flag&&verifyCode_flag;
  132. if(!flag){
  133. check();
  134. alert('请完成注册信息');
  135. }
  136. return flag;
  137. });

  138. });
  139. function check(){
  140. var email = $('#txtEmail').val();
  141. var nickname = $('#txtNickName').val();
  142. var password = $('#txtPassword').val();
  143. var verifyCode = $('#txtVerifyCode').val();
  144. if(email==""){
  145. $('#email\\.info').html('邮箱不能为空');
  146. }
  147. if(nickname==""){
  148. $('#name\\.info').html('用户名不能为空');
  149. }
  150. if(password==""){
  151. $('#password\\.info').html('密码不能为空');
  152. }
  153. if(verifyCode==""){
  154. $('#number\\.info').html('验证码不能为空');
  155. }
  156. }
  157. <DIV class=blockcode>
  158. <BLOCKQUOTE><%@page contentType="text/html;charset=utf-8"%>
  159. <%@taglib uri="/struts-tags" prefix="s" %>
  160. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  161. <html xmlns="http://www.w3.org/1999/xhtml">
  162. <head>
  163. <title>登录 - 当当网</title>
  164. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  165. <link href="../css/login.css" rel="stylesheet" type="text/css" />
  166. <link href="../css/page_bottom.css" rel="stylesheet" type="text/css" />
  167. <script src="../js/jquery-1.4.3.js"></script>
  168. <script src="../js/checkUserLogin.js"></script>
  169. </head>
  170. <body>
  171. <%@include file="../common/head1.jsp"%>

  172. <div class="enter_part">

  173. <%@include file="../common/introduce.jsp"%>

  174. <div class="enter_in">
  175. <div class="bj_top"></div>
  176. <div class="center">
  177. <div style="height: 30px; padding: 5px; color: red" id="divErrorMssage">

  178. </div>
  179. <div class="main">
  180. <h3>
  181. 登录当当网
  182. </h3>

  183. <form method="post" action="checkUser" id="login_form">
  184. <ul>
  185. <li>
  186. <span>请输入Email地址:</span>
  187. <input type="text" name="user.email" id="txtUsername" class="textbox" />
  188. </li>
  189. <li>
  190. <span class="blank">密码:</span>
  191. <input type="password" name="user.password" id="txtPassword"
  192. class="textbox" />
  193. </li>
  194. <li>

  195. <input type="submit" id="btnSignCheck" class="button_enter"
  196. value="登 录" />


  197. </li>
  198. </ul>
  199. <div align="center" id="repeatPassValidMsg">
  200. <p id="login.info" style="color:red"><s:property value="#request.login_error"/></p>
  201. </div>
  202. <div align="center" id="repeatPassValidMsg">
  203. <p id="email.info" style="color:red"></p>
  204. </div>
  205. <div align="center" id="repeatPassValidMsg">
  206. <p id="password.info" style="color:red"></p>
  207. </div>
  208. <input type="hidden" name="uri" value="${uri}" />
  209. </form>
  210. </div>
  211. <div class="user_new">
  212. <p>
  213. 您还不是当当网用户?
  214. </p>
  215. <p class="set_up">
  216. <a href="register_form.jsp">创建一个新用户>></a>
  217. </p>
  218. </div>
  219. </div>
  220. </div>
  221. </div>

  222. <%@include file="../common/foot1.jsp"%>

  223. </body>
  224. </html>

复制代码


效果图
当当网登陆界面.png

下载地址:
游客,如果您要查看本帖隐藏内容请回复




来自群组: java开发组

新浪微博达人勋

6711

积分

1677

帖子

1678

贡献

Rank: 8Rank: 8

积分
6711
发表于 2016-3-25 18:18:50 | 显示全部楼层
占坑编辑ing
发表于 2016-3-25 23:03:16 | 显示全部楼层
太棒了,感谢楼主
生活要懂得规划

新浪微博达人勋

18

积分

3

帖子

3

贡献

Rank: 1

积分
18

社区QQ达人

发表于 2016-3-31 21:55:43 | 显示全部楼层
需要需要需要需要需要需要需要

新浪微博达人勋

7036

积分

1781

帖子

1736

贡献

Rank: 8Rank: 8

积分
7036

社区QQ达人最佳新人活跃会员热心会员

发表于 2016-4-5 19:36:37 | 显示全部楼层
楼主呀,,,您太有才了。。。

新浪微博达人勋

6454

积分

1612

帖子

1614

贡献

Rank: 8Rank: 8

积分
6454
发表于 2016-4-5 21:21:59 | 显示全部楼层
元芳你怎么看?

新浪微博达人勋

6860

积分

1715

帖子

1715

贡献

Rank: 8Rank: 8

积分
6860

社区QQ达人

发表于 2016-4-5 22:19:26 | 显示全部楼层
向楼主学习

新浪微博达人勋

6685

积分

1669

帖子

1671

贡献

Rank: 8Rank: 8

积分
6685

社区QQ达人

发表于 2016-4-6 00:09:31 | 显示全部楼层
在撸一遍。。。

新浪微博达人勋

6368

积分

1592

帖子

1592

贡献

Rank: 8Rank: 8

积分
6368
发表于 2016-4-6 01:37:28 | 显示全部楼层
锄禾日当午,发帖真辛苦。谁知坛中餐,帖帖皆辛苦!

新浪微博达人勋

6604

积分

1651

帖子

1651

贡献

Rank: 8Rank: 8

积分
6604
发表于 2016-4-9 11:50:15 | 显示全部楼层
顶起顶起顶起
您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

关闭

站长推荐 上一条 /1 下一条

小黑屋|手机版|Archiver|Java教程网    

GMT+8, 2019-9-18 06:45 , Processed in 0.211503 second(s), 45 queries .

Powered by Discuz X3.2

© 2001-2013 JAVA教程网

快速回复 返回顶部 返回列表