服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|JAVA教程|ASP教程|编程技术|正则表达式|

服务器之家 - 编程语言 - JAVA教程 - java网上图书商城(1)User模块

java网上图书商城(1)User模块

2020-07-10 19:22ganchuanpu JAVA教程

这篇文章主要介绍了java网上图书商城,User模块,实现用户注册功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了java网上图书商城user模块代码,供大家参考,具体内容如下

效果图:

java网上图书商城(1)User模块

regist.js

?
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
$(function() {
 /*
 * 1. 得到所有的错误信息,循环遍历之。调用一个方法来确定是否显示错误信息!
 */
 $(".errorClass").each(function() {
 showError($(this));//遍历每个元素,使用每个元素来调用showError方法
 });
 
 /*
 * 2. 切换注册按钮的图片
 */
 $("#submitBtn").hover(
 function() {
  $("#submitBtn").attr("src", "/goods/images/regist2.jpg");
 },
 function() {
  $("#submitBtn").attr("src", "/goods/images/regist1.jpg");
 }
 );
 
 /*
 * 3. 输入框得到焦点隐藏错误信息
 */
 $(".inputClass").focus(function() {
 var labelId = $(this).attr("id") + "Error";//通过输入框找到对应的label的id
 $("#" + labelId).text("");//把label的内容清空!
 showError($("#" + labelId));//隐藏没有信息的label
 });
 
 /*
 * 4. 输入框失去焦点进行校验
 */
 $(".inputClass").blur(function() {
 var id = $(this).attr("id");//获取当前输入框的id
 var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到对应的校验函数名
 eval(funName);//执行函数调用
 });
 
 /*
 * 5. 表单提交时进行校验
 */
 $("#registForm").submit(function() {
 var bool = true;//表示校验通过
 if(!validateLoginname()) {
  bool = false;
 }
 if(!validateLoginpass()) {
  bool = false;
 }
 if(!validateReloginpass()) {
  bool = false;
 }
 if(!validateEmail()) {
  bool = false;
 }
 if(!validateVerifyCode()) {
  bool = false;
 }
 
 return bool;
 });
});
 
/*
 * 登录名校验方法
 */
function validateLoginname() {
 var id = "loginname";
 var value = $("#" + id).val();//获取输入框内容
 /*
 * 1. 非空校验
 */
 if(!value) {
 /*
  * 获取对应的label
  * 添加错误信息
  * 显示label
  */
 $("#" + id + "Error").text("用户名不能为空!");
 showError($("#" + id + "Error"));
 return false;
 }
 /*
 * 2. 长度校验
 */
 if(value.length < 3 || value.length > 20) {
 /*
  * 获取对应的label
  * 添加错误信息
  * 显示label
  */
 $("#" + id + "Error").text("用户名长度必须在3 ~ 20之间!");
 showError($("#" + id + "Error"));
 false;
 }
 /*
 * 3. 是否注册校验
 */
 $.ajax({
 url:"/goods/UserServlet",//要请求的servlet
 data:{method:"ajaxValidateLoginname", loginname:value},//给服务器的参数
 type:"POST",
 dataType:"json",
 async:false,//是否异步请求,如果是异步,那么不会等服务器返回,我们这个函数就向下运行了。
 cache:false,
 success:function(result) {
  if(!result) {//如果校验失败
  $("#" + id + "Error").text("用户名已被注册!");
  showError($("#" + id + "Error"));
  return false;
  }
 }
 });
 return true;
}
 
/*
 * 登录密码校验方法
 */
function validateLoginpass() {
 var id = "loginpass";
 var value = $("#" + id).val();//获取输入框内容
 /*
 * 1. 非空校验
 */
 if(!value) {
 /*
  * 获取对应的label
  * 添加错误信息
  * 显示label
  */
 $("#" + id + "Error").text("密码不能为空!");
 showError($("#" + id + "Error"));
 return false;
 }
 /*
 * 2. 长度校验
 */
 if(value.length < 3 || value.length > 20) {
 /*
  * 获取对应的label
  * 添加错误信息
  * 显示label
  */
 $("#" + id + "Error").text("密码长度必须在3 ~ 20之间!");
 showError($("#" + id + "Error"));
 false;
 }
 return true;
}
 
/*
 * 确认密码校验方法
 */
function validateReloginpass() {
 var id = "reloginpass";
 var value = $("#" + id).val();//获取输入框内容
 /*
 * 1. 非空校验
 */
 if(!value) {
 /*
  * 获取对应的label
  * 添加错误信息
  * 显示label
  */
 $("#" + id + "Error").text("确认密码不能为空!");
 showError($("#" + id + "Error"));
 return false;
 }
 /*
 * 2. 两次输入是否一致校验
 */
 if(value != $("#loginpass").val()) {
 /*
  * 获取对应的label
  * 添加错误信息
  * 显示label
  */
 $("#" + id + "Error").text("两次输入不一致!");
 showError($("#" + id + "Error"));
 false;
 }
 return true;
}
 
/*
 * Email校验方法
 */
function validateEmail() {
 var id = "email";
 var value = $("#" + id).val();//获取输入框内容
 /*
 * 1. 非空校验
 */
 if(!value) {
 /*
  * 获取对应的label
  * 添加错误信息
  * 显示label
  */
 $("#" + id + "Error").text("Email不能为空!");
 showError($("#" + id + "Error"));
 return false;
 }
 /*
 * 2. Email格式校验
 */
 if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {
 /*
  * 获取对应的label
  * 添加错误信息
  * 显示label
  */
 $("#" + id + "Error").text("错误的Email格式!");
 showError($("#" + id + "Error"));
 false;
 }
 /*
 * 3. 是否注册校验
 */
 $.ajax({
 url:"/goods/UserServlet",//要请求的servlet
 data:{method:"ajaxValidateEmail", email:value},//给服务器的参数
 type:"POST",
 dataType:"json",
 async:false,//是否异步请求,如果是异步,那么不会等服务器返回,我们这个函数就向下运行了。
 cache:false,
 success:function(result) {
  if(!result) {//如果校验失败
  $("#" + id + "Error").text("Email已被注册!");
  showError($("#" + id + "Error"));
  return false;
  }
 }
 });
 return true;
}
 
/*
 * 验证码校验方法
 */
function validateVerifyCode() {
 var id = "verifyCode";
 var value = $("#" + id).val();//获取输入框内容
 /*
 * 1. 非空校验
 */
 if(!value) {
 /*
  * 获取对应的label
  * 添加错误信息
  * 显示label
  */
 $("#" + id + "Error").text("验证码不能为空!");
 showError($("#" + id + "Error"));
 return false;
 }
 /*
 * 2. 长度校验
 */
 if(value.length != 4) {
 /*
  * 获取对应的label
  * 添加错误信息
  * 显示label
  */
 $("#" + id + "Error").text("错误的验证码!");
 showError($("#" + id + "Error"));
 false;
 }
 /*
 * 3. 是否正确
 */
 $.ajax({
 url:"/goods/UserServlet",//要请求的servlet
 data:{method:"ajaxValidateVerifyCode", verifyCode:value},//给服务器的参数
 type:"POST",
 dataType:"json",
 async:false,//是否异步请求,如果是异步,那么不会等服务器返回,我们这个函数就向下运行了。
 cache:false,
 success:function(result) {
  if(!result) {//如果校验失败
  $("#" + id + "Error").text("验证码错误!");
  showError($("#" + id + "Error"));
  return false;
  }
 }
 });
 return true;
}
 
/*
 * 判断当前元素是否存在内容,如果存在显示,不页面不显示!
 */
function showError(ele) {
 var text = ele.text();//获取元素的内容
 if(!text) {//如果没有内容
 ele.css("display", "none");//隐藏元素
 } else {//如果有内容
 ele.css("display", "");//显示元素
 }
}
 
/*
 * 换一张验证码
 */
function _hyz() {
 /*
 * 1. 获取<img>元素
 * 2. 重新设置它的src
 * 3. 使用毫秒来添加参数
 */
 $("#imgVerifyCode").attr("src", "/goods/VerifyCodeServlet?a=" + new Date().getTime());
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

延伸 · 阅读

精彩推荐