文章目录
前言
注册的时候我们经常会出现重复的值，这对于我们的程序是不允许的，所以我们用到了ajax
提示：以下是本篇文章正文内容，下面案例可供参考
一、开发工具（idea）
二、注册流程
1.数据库表
代码如下：
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for witkey_user_regedit
-- ----------------------------
DROP TABLE IF EXISTS `witkey_user_regedit`;
CREATE TABLE `witkey_user_regedit` (
`pk_id` int(11) NOT NULL AUTO_INCREMENT,
`user_id` varchar(32) DEFAULT NULL,
`email` varchar(64) DEFAULT NULL,
`password` varchar(32) DEFAULT NULL,
`remark` varchar(256) DEFAULT NULL,
PRIMARY KEY (`pk_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of witkey_user_regedit
-- ----------------------------
2.UserController
代码如下（示例）：
//注册
@RequestMapping("/add")
@ResponseBody
public String add(UserRegedit regedit,UserInfo userInfo,String userName){
String s = UUID.randomUUID().toString().substring(1,6).toUpperCase().replace("_","");
regedit.setUserId(s);
int i = userInfoService.add(regedit);
userInfo.setUserId(s);
userInfo.setEmail(regedit.getEmail());
userInfo.setUserName(userName);
int i1 = userInfoService.addAll(userInfo);
if(i1>0&&i>0){
return "redirect:/user/dtiao";
}
else {
return "redirect:/user/ztiao";
}
}
3.UserService
代码如下：
//注册
int add( UserRegedit regedit);
4.UserServiceiml
代码如下：
@Service
public class UserInfoiml implements UserInfoService {
@Autowired
private UserInfoMapper userInfoMapper;
//注册
@Override
public int add(UserRegedit regedit) {
return userInfoMapper.add(regedit);
}
}
5.UserMapper.xml
代码如下：
//注册
int add( UserRegedit regedit);
6.Usermappr.xml
代码如下：
<insert id="add" keyProperty="cn.bgs.pojo.UserRegedit">
insert into user_regedit(pk_id,user_id,email,password) value (0,#{userId},#{email},#{password})
</insert>
7.jsp
代码如下：
<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css" />
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<title></title>
</head>
<body>
<form action="${pageContext.request.contextPath}/user/add" method="post" id="form">
<div class="z">
<div class="z-2">
<div class="z-2-1">
<div class="z-2-1-2">
</div>
<div class="z-2-1-1">
<img src="../image/1.png">
</div>
<d class="h"><h1>注册</h1></d>
<div class="z-2-1-1-1" >
<div class="user">
<div class="icon"><img src="../image/user_icon_copy.png"></div>
<input type="text" name="userName" id="userName" placeholder="请输入用户名" onblur="uu()">
</div>
<p id="us" style="color:red"> </p>
<div class="user">
<div class="icon"><img src="../image/user_icon_copy.png"></div>
<input type="email" name="email" id="email" onblur="ee()" placeholder="请输入邮箱">
</div>
<p id="es" style="color:red"> </p>
<div class="user">
<div class="icon"><img src="../image/lock_icon_copy.png"></div>
<input type="password" name="password" placeholder="请输入密码" id="password" onblur="pp()">
</div>
<p id="ps" style="color:red"> </p>
<div class="user">
<div class="icon" onclick="yan()"><img src="../image/lock_icon_copy.png"></div>
<input type="password" name="apassword" id="apassword" onblur="aa()" placeholder="请再次确认密码">
</div>
<p id="as" style="color:red"> </p>
<div class="land">
<input type="submit" value="注册" onclick="den()" class="den">
<a href="${pageContext.request.contextPath}/user/dtiao"><input type="button" value="返回" class="back"></a>
</div>
</div>
</div>
</div>
</div>
</form>
<script language="JavaScript">
var us=document.getElementById('us');
var es=document.getElementById('es');
var ps=document.getElementById('ps');
var as=document.getElementById('as');
var up=false;/*用户名判断*/
var ep=false;/*邮箱判断*/
var wp=false;/*密码判断*/
var ap=false;/*确认密码判断*/
/*判断用户名是否为空*/
function uu(){
var name=$('#userName').val();
if(name.length!=0){
us.innerHTML=" ";
up=true;
}
else{
us.innerHTML="用户名不能为空";
}
}
/*判断邮箱是否为空*/
function ee() {
var email=$('#email').val();
if(email.length!=0){
$.ajax({
type: "POST",
data: {"ewl": email},
url:"${pageContext.request.contextPath}/user/findemail",
dataType: "json",
success:function(data){
if(data==1){
es.innerHTML="可以使用"
ep=true;
}
else if(data==2){
es.innerHTML="邮箱已注册";
}
}
});
}
else{
es.innerHTML="邮箱不能为空";
}
}
/*判断密码是否为空*/
function pp(){
var password=$('#password').val();
if(password.length!=0){
ps.innerHTML=" "
if(password.length<2||password.length>16){
ps.innerHTML="长度要在8~16"
}
else{
ps.innerHTML=" "
wp=true;
}
}
else{
ps.innerHTML="密码不能为空";
}
}
/*判断密码是否相同和是否为空*/
function aa() {
var password=$('#password').val();
var apassword=$('#apassword').val();
if(apassword.length==0){
as.innerHTML="密码不能为空";
}
else if(apassword!=password){
as.innerHTML="密码不相同，请再次输入";
}
else{
as.innerHTML=" ";
ap=true;
}
}
/*注册判断*/
function den(){
var password=$('#password').val();
var apassword=$('#apassword').val();
var email=$('#email').val();
var name=$('#userName').val();
if(up==true&&ep==true&&wp==true&&ap==true){
alert("注册成功")
$("#form").attr('action', "${pageContext.request.contextPath}/user/login");
}
else{
alert("请刷新重新输入")
$("#form").submit(function(){
return false;
});
}
}
</script>
</body>
</html>
8.测试
如果为空就会有提示信息
如果不为空且格式正确就会注册
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
