旅游网
一、注册功能
1-去注册页面
a-页面
在header.jsp里添加这个超链接
b-控制层
在UserController中
2-验证输入的合法性
a-验证规则
用户名:不为空且由数字、字母、下划线组成的6-10个字符，不符合要求给提示信息
密码:不为空且由数字、字母、下划线组成的6-15个字符，不符合要求给提示信息
姓名:非空，不符合要求给提示信息
出生日期:非空，不符合要求给提示信息
邮箱:不为空且要合法，不符合要求给提示信息
手机号:不为空且由11位符合规则的数字组成，不符合要求给提示信息
b-验证时机
b1、提交表单时 b2、离开焦点时
c-验证代码
<a href="toRegPage.do">注册</a>1
@RequestMapping("/toRegPage.do")
public String toRegPage(){
return "register";
}
1
2
3
4
<script type="text/javascript">
$(function(){ //页面初始化
$("#btn1").click(function(){//点击时 验证
1
2
3
$("#registerForm").submit(function(){
return checkUname() && checkEmail() && checkPhone() && checkPwd() &&
checkName() && checkBirth();
});
});
$("#username").blur(checkUname); //离开焦点时 验证
$("#email").blur(checkEmail);
$("#telephone").blur(checkPhone);
$("#password").blur(checkPwd);
$("#name").blur(checkName);
$("#birthday").blur(checkBirth);
});
//验证用户名
function checkUname(){
var uname=$("#username").val();
var reg=/^\w{6,10}$/; //正则表达式
if(!reg.test(uname)){
$("#username").css("border","1px solid red"); //加红色 实线边框
$("#msg").html("用户名由数字字母下划线组成的6-10个字符!");
return false;
}
$("#username").css("border",""); //清空红色 实线边框
$("#msg").html("");
return true;
}
//验证邮箱
function checkEmail(){
var email=$("#email").val();
var reg=/^[a-z0-9]{3,12}@[a-z0-9]{2,3}\.com$/; //邮箱正则表达式 sunwei@163.com
1111@qq.com
if(!reg.test(email)){
$("#email").css("border","1px solid red"); //加红色 实线边框
$("#msg").html("邮箱不合法!");
return false;
}
$("#email").css("border",""); //清空红色 实线边框
$("#msg").html("");
return true;
}
//验证手机号
function checkPhone(){
var telephone=$("#telephone").val();
var reg=/^1[356789]\d{9}$/; //手机号 正则表达式
if(!reg.test(telephone)){
$("#telephone").css("border","1px solid red"); //加红色 实线边框
$("#msg").html("请填写正确的手机号!");
return false;
}
$("#telephone").css("border",""); //清空红色 实线边框
$("#msg").html("");
return true;
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
3-用户名唯一性
用户名通过验证要发送异步ajax请求-从后台验证用户名是否重复
a-数据层
}
//验证密码
function checkPwd(){
var password=$("#password").val();
var reg=/^\w{6,15}$/; //密码 正则表达式
if(!reg.test(password)){
$("#password").css("border","1px solid red"); //加红色 实线边框
$("#msg").html("密码由6-15位数字、字母、下划线组成!");
return false;
}
$("#password").css("border",""); //清空红色 实线边框
$("#msg").html("");
return true;
}
//验证姓名
function checkName(){
var name=$("#name").val();
if(name.length==0){
$("#name").css("border","1px solid red"); //加红色 实线边框
$("#msg").html("姓名为必填项!");
return false;
}
$("#name").css("border",""); //清空红色 实线边框
$("#msg").html("");
return true;
}
//验证出生日期
function checkBirth(){
var birthday=$("#birthday").val();
if(birthday.length==0){
$("#birthday").css("border","1px solid red"); //加红色 实线边框
$("#msg").html("出生日期为必填项!");
return false;
}
$("#birthday").css("border",""); //清空 红色 实线边框
$("#msg").html("");
return true;
}
</script>
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
b-业务层接口
c-业务层实现
在UserServiceImpl中重写以下方法
d、控制层
e、表示层
在注册页面的jsp的验证用户名中 添加发送ajax请求部分
public interface UserMapper {
/**
* 根据用户名查询该用户
*/
@Select("select * from tab_user where username=#{username}")
User selectByUname(String username);
}
1
2
3
4
5
6
7
boolean checkUname(String username);1
@Override
public boolean checkUname(String username) {
User user=uMapper.selectByUname(username);
if(user!=null){
return false;
}else{
return true;
}
}
1
2
3
4
5
6
7
8
9
/**
* 验证用户名是否重复
*/
@RequestMapping("/checkUname.do")
@ResponseBody
public String checkUserName(String username){
boolean flag=uService.checkUname(username);
if(!flag){
return "false"; //用户名重复 返回false
}else{
return "true";
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
//验证用户名
function checkUname(){
var uname=$("#username").val();
1
2
3
4、保存数据
a-页面情况
b-数据层
c-映射文件
var reg=/^\w{6,10}$/; //正则表达式
if(!reg.test(uname)){
$("#username").css("border","1px solid red"); //加红色 实线边框
$("#msg").html("用户名由数字字母下划线组成的6-10个字符!");
return false;
}
$("#username").css("border",""); //清空红色 实线边框
$("#msg").html("");
//发送ajax请求
$.post("checkUname.do",{"username":uname},function(res){
if(res=="false"){
$("#username").css("border","1px solid red"); //加红色 实线边框
$("#msg").html("用户名重复不可用!");
return false;
}else{
$("#username").css("border",""); //清空红色 实线边框
$("#msg").html("");
return true;
}
})
return true;
}
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form id="registerForm" action="doReg.do" method="post">1
/**
* 增加用户
*/
int addUser(User user);
1
2
3
4
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ssm.dao.UserMapper">
<!--增加用户|注册 -->
<insert id="addUser" useGeneratedKeys="true" keyProperty="uid">
insert into
tab_user(username,password,name,birthday,sex,telephone,email,status,code)
values(#{username},#{password},#{name},#{birthday},#{sex},#{telephone},#{email},#
{status},#{code});
</insert>
</mapper>
1
2
3
4
5
6
7
8
9
