SpringBoot注册登录(三)：注册--验证账号密码是否符合格式及后台完成注册功能

最新推荐文章于 2024-03-07 16:23:18 发布

FromNowOnUntilTheEnd

最新推荐文章于 2024-03-07 16:23:18 发布

阅读量2.7w

点赞数 4

分类专栏：一个SpringBoot项目文章标签：注册功能

本文链接：https://blog.csdn.net/qq_36688143/article/details/79498338

版权

一个SpringBoot项目专栏收录该内容

15 篇文章 7 订阅

订阅专栏

SpringBoot注册登录(一)：User表的设计点击打开链接

SpringBoot注册登录(二)：注册---验证码kaptcha的实现点击打开链接

SpringBoot注册登录(三)：注册--验证账号密码是否符合格式及后台完成注册功能点击打开链接

SpringBoot注册登录(四)：登录功能--密码错误三次，需要等待2分钟才能登录，固定时间内不能登录点击打开链接

SpringBoot注册登录(五)：登录功能--Scheduling Tasks定时作业，用于某个时间段允许/不允许用户登录点击打开链接

SpringBoot（六）：拦截器--只允许进入登录注册页面，没登录不允许查看其它页面点击打开链接

SpringBoot--mybatis--ajax--模态框--log：注册、登录、拦截器、文件系统源代码点击打开链接

首先重复上一篇提到的register.html，所以如果只要验证账号密码功能的，不用看上一篇也无所谓。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>用户注册页面</title>
<script src="webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet"
	href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="/js/kaptcha.js"></script>
<script type="text/javascript" src="/js/validate.js"></script>
<script type="text/javascript" src="/js/register.js"></script>
</head>
<body>
<!-- begin:添加一个注册表单 -->
	<div>
		<form id="insert_modal" class="form-horizontal">
			<div class="col-sm-10">
				<input type="text" class="form-control" id="insert_name"
					name="name" placeholder="请输入账号"/> <span
					class="help-block"></span>
			</div>
			<div class="col-sm-10">
				<input type="password" class="form-control" id="insert_password"
					name="password" placeholder="请输入密码"/> <span
					class="help-block"></span>
			</div>
			
			<!-- begin:验证码 -->
			<div class="col-sm-10">
				<input type="text" class="form-control" id="kaptcha" name="kaptcha"
					placeholder="请输入验证码" style="color: #000000;" /><span
					class="help-block"></span> <img
					src="kaptcha.jpg" width="200" id="kaptchaImage" title="看不清，点击换一张" />
				<small>看不清，点击换一张</small>
				
				<p></p>
				<button type="button" class="btn btn-primary" id="user_insert_btn">注册</button>
			
				<div>
					<!-- begin:登录功能 -->
					<p></p><p><a th:href="@{/signin} ">点击前往登录吧！</a></p>
				</div>
			
			</div>
			<!-- end:验证码 -->
			
		</form>
		
	</div>
	
	
	
	
</body>
</html>

②使用webjars引入bootstrap和jquery，不需要自己下载这两个的js文件，在这个目录下新建一个名为webjars的文件夹就可以直接引入了

<dependency>  
            <groupId>org.webjars</groupId>  
            <artifactId>jquery</artifactId>  
            <version>3.1.1</version>  
        </dependency>

③前端校验账号密码要引入的jar

                <!-- JRS303校验 -->
		<!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-validator -->
		<dependency>
			<groupId>org.hibernate</groupId>
			<artifactId>hibernate-validator</artifactId>
		</dependency>

④前端验证账号密码是否符合格式的validate.js

//显示验证结果
function show_validate_msg(ele, status, msg) {
	if ("success" == status) {
		// 让父容器变色
		$(ele).parent().addClass("has-success");
		// 给sapn赋值正确信息
		$(ele).next("span").text(msg);
	} else if ("error" == status) {
		// 让父容器变色
		$(ele).parent().addClass("has-error");
		// 给sapn赋值错误信息
		$(ele).next("span").text(msg);
	}
}

// 验证账号密码
function validate_add_form() {
	// 验证用户名
	var name = $("#insert_name").val();
	var reg_name = /(^[a-zA-Z0-9_-]{6,19}$)|(^[\u2E80-\u9FFF]{2,5})/;
	if (!reg_name.test(name)) {
		show_validate_msg("#insert_name", "error", "用户名必须是2-5位中文或6-19位英文和数字的组合");
		return false;
	} else {
		show_validate_msg("#insert_name", "success", "");
	}

	// 验证密码
	var password = $("#insert_password").val();
	var reg_password = /(^[a-zA-Z0-9_-]{6,19}$)/;
	if (!reg_password.test(password)) {
		show_validate_msg("#insert_password", "error", "密码必须是6-19位英文和数字的组合");
		return false;
	} else {
		show_validate_msg("#insert_password", "success", "");
	}
	return true;
}

二、

2.1 注册功能ajax请求的register.js

$(function(){ 
$("#user_insert_btn").click(function(){
	
	//前端正则表达式验证
	if(!validate_add_form()){
		return false;
	}
	//验证用户名是否已经被占用
	if($(this).attr("ajax-va")=="error"){
		return false;
	} 
	
	var kaptcha = $("#kaptcha").val();
	if (kaptcha.length == 0) {
		alert("您没有输入验证码！");
	} else {
		var name = $("#insert_name").val();
		var password = $("#insert_password").val();
		
		//发起ajax进行添加操作
		$.ajax({
			url:"register",
			data:{"name":name,"password":password},  
			type:"post",
			success:function(msg){
				if(msg.code==100){
					//这里再次经过请求才进登录页面
					//如果放在静态static下静态页面就可以直接这样子跳页面:window.location.href = "signin.html";
					//但是在templates下必须经过请求否则就会暴露页面不安全
					
					//跳转到登录页面
					window.location.href = "signin";
				}else{
					alert("---注册失败---");
					//显示失败信息
					//有哪个字段错误,就显示哪个字段
					if(undefined!=msg.map.map.username){
						//显示账号错误信息
						show_validate_msg("#insert_name","error",msg.map.map.username);
					}
					if(undefined!=msg.map.map.password){
						show_validate_msg("#insert_password","error",msg.map.map.password);
					}
				}

			},
			error:function(){
			}
		});
	}
	
	
	
	
});
});

2.2 后台代码

@ResponseBody
	@RequestMapping("/register")
	public Msg Register(String name,String password) {
		//判断该用户名是否已被注册
		boolean num = userService.userRegister(name);
		
		if (num == false) {
			Map<String, Object> map2 = new HashMap<String, Object>();
			map2.put("username", "用户名已被注册");
			return Msg.error().add("map", map2);
		} else {
			User user = new User();
			user.setName(name);
			user.setPassword(password);
			//新注册用户错误次数都为0
			user.setMissNumber(0);
			//1超级管理员:直接修改数据库的用户，只能打开mySQL改的
			//2普通会员:通过请求注册的用户
			user.setRoleId(2);
			int flag = userService.userInsert(user);
			
			if (flag==1) {
				return Msg.success();
			} else {
				return Msg.error();
			}
		}
	}

FromNowOnUntilTheEnd

关注

4
点赞
踩
67

收藏

觉得还不错? 一键收藏
11
评论
SpringBoot注册登录(三)：注册--验证账号密码是否符合格式及后台完成注册功能

SpringBoot注册登录(一)：User表的设计点击打开链接SpringBoot注册登录(二)：注册---验证码kaptcha的实现点击打开链接 SpringBoot注册登录(三)：注册--验证账号密码是否符合格式及后台完成注册功能点击打开链接 SpringBoot注册登录(四)：登录功能--密码错误三次，需要等待2分钟才能登录，固定时间内不能登录点击打开链接SpringBo...
复制链接

扫一扫