SpringBoot註冊登錄(三)：註冊--驗證賬號密碼是否符合格式及後臺完成註冊功能
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();
}
}
}
SpringBoot註冊登錄(三)：註冊--驗證賬號密碼是否符合格式及後臺完成註冊功能