
平臺論壇博客文庫

› 論壇 › 程序設(shè)計 › Web開發(fā) › 利用ajax檢測用戶注冊時容易忽略的small bug

利用ajax檢測用戶注冊時容易忽略的small bug [復(fù)制鏈接]

聽老歌

家境小康

論壇徽章:: 0

電梯直達

1樓 [收藏(0)] [報告]

發(fā)表于 2011-03-10 11:26 |只看該作者 |倒序瀏覽

利用ajax檢測用戶注冊時容易忽略的small bug

當(dāng)我們想實現(xiàn)一個程序——利用郵箱激活賬號的注冊.
那么首先我們要做哪些準備呢：

Ø 首先我們要寫js判斷用戶名是否為空或者是不是只有空格,當(dāng)失去焦點是我們利用ajax去異步查詢
看看是否此用戶名已經(jīng)備注測，當(dāng)然于此同時其它項都不能為空當(dāng)然重要的就是郵箱必須正確，因為我們是用郵箱激活的嘛
Ø 那么怎樣去實現(xiàn)郵箱激活呢，首先當(dāng)用戶名不重復(fù)的時候我們要把用戶的注冊信息插入數(shù)據(jù)庫并且定義默認標識，然后當(dāng)數(shù)據(jù)插入成功是我們給用戶發(fā)送一封簡易郵件，在發(fā)送這封郵件之前我們要根據(jù)用戶名去查詢這條記錄的id然后把id通過連接傳遞,也可以在插入數(shù)據(jù)的時候插入隨機數(shù)(確保這是唯一標識)然后傳遞唯一標識,當(dāng)用戶收到郵件是點擊連接，然后把插入數(shù)據(jù)的狀態(tài)改變未激活，這樣就可以實現(xiàn)了
Ø 其次就是我要把相應(yīng)的js和相關(guān)的jar包導(dǎo)入

那么在寫這個檢測程序是我們會容易忽略什么bug呢，那就是當(dāng)我們通過ajax檢測到用戶名已存在并且其他項都符合js的判斷,當(dāng)我們點擊提交時，我們要當(dāng)然要阻止其提交了，否則數(shù)據(jù)就重復(fù)了，一般人們都容易忽略這一點，當(dāng)我們看到輸入框提示此用戶已存在，鍵入我們不修改直接提交呢？

那么我們應(yīng)該怎么實現(xiàn)，當(dāng)失去焦點時判斷用戶名是否重復(fù)，并且點擊提交時，判斷其他是否符合條件，并且判斷用戶是否符合要求呢
下面就簡單的來實現(xiàn)一下：
首先先來做一個頁面并設(shè)置其隱藏域當(dāng)提交請求時進行判斷用戶名是否重復(fù)



Java代碼

1. <head>
2. <base href="<%=basePath%>">
3.
4. <title>My JSP 'admin_zhuce.jsp' starting page</title>
5.
6. <meta http-equiv="pragma" content="no-cache">
7. <meta http-equiv="cache-control" content="no-cache">
8. <meta http-equiv="expires" content="0">
9. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
10. <meta http-equiv="description" content="This is my page">
11. <!--
12. <link rel="stylesheet" type="text/css" href="styles.css">
13. -->
14. <script type="text/javascript">
15.
16. function check(){
17. var resg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//判斷郵箱
18. var na = document.getElementById("sum").value;//獲取隱藏域的值
19. var name = document.getElementById("name").value;
20. var pass = document.getElementById("pass").value;
21. var flag = true;
22.
23. if (name.length<=0) {//判斷不嚴謹沒有判斷空格，可自行實現(xiàn)
24. alert("用戶名不能為空,請輸入用戶名!");
25. form1.name.focus();
26. flag = false;
27. }
28. if (pass.length<=0) {
29. alert("密碼不能為空,請輸入密碼!");
30. form1.pass.focus();
31. flag = false;
32. }
33. if(!resg.test(form1.email.value)){
34. alert("郵箱格式不正確,請輸入正確的郵箱!");
35. form1.email.focus();
36. flag=false;
37. }if(na==0){
38. //如果在提示下沒有將用戶名修改，則提交失敗
39. flag=false;
40.
41. }
42. return flag;
43. }
44.</script>
45. <script type="text/javascript" language="javascript"
46. src="./script/ajax.js"></script>
47. <script type="text/javascript">
48.
49. function checkuser(){
50.
51. var user=document.getElementById("name").value;
52.
53. var ajax=initAjax();
54. var url = encodeURI('/Goods/admin_zhuce?user='+user+'&r='+Math.random()+'&esper=login'); //編碼請求地址和參數(shù)
55.
56.
57. //異步方式調(diào)用
58. ajax.open('get', url, true);
59. ajax.send(null);
60. document.getElementById("spanUser").innerHTML='<img src=./images/wait.gif />';
61. //send完后無非直接得到響應(yīng)，需要注冊事件監(jiān)聽readyState屬性的值
62. //onreadystatechange有5個值：
63. // 0:未初始化
64. // 1:初始化
65. // 2:發(fā)送數(shù)據(jù)
66. // 3:接收數(shù)據(jù)中
67. // 4:數(shù)據(jù)接收完畢
68.
69. ajax.onreadystatechange = function(){
70. // alert("111");
71. //當(dāng)readyState=4，表示服務(wù)器端執(zhí)行完畢
72. if(ajax.readyState == 4 && ajax.status == 200 ){
73.
74. //alert(ajax.responseText);
75.
76. //alert(ajax.responseText);
77. if(ajax.responseText){
78.
79. document.getElementById("spanUser").innerHTML='<font color=red >此用戶已存在</font>';
80. document.all.sum.value="0";//想隱藏域?qū)懼�，以便于提交時判斷用戶名是否在存在提示下進行了修改
81.
82. }
83. else{
84.
85. document.getElementById("spanUser").innerHTML='<font color=red >用戶名可以使用</font>';
86. document.all.sum.value="1";
87. }
88.
89.
90. }
91. }
92. }
93.
94. </script>
95. </head>
96.
97. <body>
98. <div align="center">
99. <form name="form1" method="post"
100. action="${public String _elExpression26pageContext.getGetRequest()().getContextPath()}/admin_zhuce?esper=zhuce"
101. onsubmit="return check()">
102. <table>
103. <caption>
104. 用戶注冊
105. </caption>
106. <tr>
107. <th>
108. 用戶名：
109. </th>
110. <th>
111. <input type="text" name="name" onblur="checkuser()" />
112. </th>
113. <th>
114. <span id="spanUser"></span>
115. </th>
116. </tr>
117. <tr>
118. <th>
119. 密  碼：
120. </th>
121. <th>
122. <input type="password" name="pass" />
123. </th>
124. </tr>
125. <tr>
126. <th>
127. 郵  箱：
128. </th>
129. <th>
130. <input type="text" name="email" />
131. </th>
132. </tr>
133. <tr>
134. <th>
135. <input type="submit" value="提交" />
136. </th>
137. <th>
138. <input type="reset" name="重置" />
139. <input type="hidden" value="" name="sum" id="sum" />
140. </th>
141.
142. </tr>
143. </table>
144. </form>
145. </div>
146. </body>

復(fù)制代碼

Java代碼

1.然后就是servelt
2.ublic void doPost(HttpServletRequest request, HttpServletResponse response)
3. throws ServletException, IOException {
4.
5. request.setCharacterEncoding("UTF-8");
6.
7. // 處理注冊信息
8. String esper = request.getParameter("esper") == null ? "" : request
9. .getParameter("esper");
10.
11. if (esper != null && esper.equals("zhuce")) {
12. // System.out.println("進來了");
13. String name = request.getParameter("name");
14. String pass = request.getParameter("pass");
15. String email = request.getParameter("email");
16. AdminServiceImpl adminServiceImpl = new AdminServiceImpl();
17. Admin entity = new Admin(name, pass);
18.
19. boolean flag = adminServiceImpl.insert(entity);
20. if (flag) {
21.
22. System.out.println("成功");
23. // 根據(jù)用戶名獲取id
24. entity=adminServiceImpl.items(name);
25. int id=entity.getId();
26. //發(fā)送郵件
27. String subject = "注冊激活";
28. String body = "點擊下面網(wǎng)址激活賬號"
29. + "http://192.168.51.24:8080/Goods/admin_zhuce?esper=jh&id="+id;
30.
31. NewSendMail sm = new NewSendMail();
32. sm.sMail("Longmanfei", email, name, subject, body);
33. request.getRequestDispatcher("admin/admin_login.jsp").forward(
34. request, response);
35. } else {
36. System.out.println("失敗");
37. }
38.
39. }if(esper != null && esper.equals("jh")){
40. String id=request.getParameter("id");
41. AdminServiceImpl adminServiceImpl = new AdminServiceImpl();
42. boolean flag=adminServiceImpl.update_qx(Integer.valueOf(id));
43. if(flag){
44. request.getRequestDispatcher("admin/admin_login.jsp").forward(
45. request, response);
46. }else{
47. System.out.println("激活失敗");
48. }
49.
50. }
51.
52.}

復(fù)制代碼

Java代碼

1.郵件發(fā)送里面的屬性根據(jù)自己定義
2.package cn.csdn.util;
3.
4.
5.import org.apache.commons.mail.*;
6.public class NewSendMail {
7. public String id;
8. public String to;/* 收信人地址 */
9. public String toName;//收信人姓名
10. public String subject;/* 主題 */
11. public String body;
12. public boolean sMail(String faname,String to,String toName,String subject,String body){
13. boolean flag=false;
14. HtmlEmail email=new HtmlEmail();
15. //System.out.println(faname+to+toName+subject+body);
16. try {
17.
18. //System.out.println("發(fā)送成功");
19. email.setHostName("smtp.163.com");//設(shè)置發(fā)信的smtp服務(wù)器
20. email.addTo(to, toName);//設(shè)置收件人帳號和收件人
21. email.setFrom("Longmanfei@163.com",faname);//設(shè)置發(fā)信的郵件帳號和發(fā)信人
22. email.setSubject(subject);//設(shè)置郵件主題
23. email.setAuthentication("Longmanfei@163.com",密碼);//如果smtp服務(wù)器需要認證的話，在這里設(shè)置帳號、密碼
24. email.setCharset("utf-8");
25. email.setHtmlMsg(body);//設(shè)置郵件正文和字符編碼
26.
27. email.send();
28.
29. flag=true;
30. } catch (EmailException e) {
31. //flag=false;
32. System.out.println("發(fā)送失敗");
33. e.printStackTrace();
34. } return flag;
35. }/
36. public String getId() {
37. return id;
38. }
39. public void setId(String id) {
40. this.id = id;
41. }
42.}