出于某些考虑,博客采用邮箱注册方式
1. 编写登录界面
去掉了Spring Security以后,自己编写登录登出接口,然后登录采用的方式是弹出框方式,也就是利用bootstrap中的modal
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle" style="color:black">LoginIn</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="receiverShow" style="color:black">
<form>
<div class="form-group">
<label for="LoginModalEmail">Email</label>
<input type="email" class="form-control" id="LoginModalEmail" placeholder="Email">
<div class="invalid-feedback">
请输入正确的Email
</div>
</div>
<div class="form-group">
<label for="LoginModalPassword">Password</label>
<input type="password" class="form-control" id="LoginModalPassword" placeholder="password">
<div class="invalid-feedback">
密码长度不小于6,只能包含数字字母和标点符号
</div>
</div>
</form>
</div>
<div class="modal-footer">
<a id="LoginInFormMessage"></a>
<button type="button" class="btn btn-secondary" id="GoToRegisterFromLogin">注册</button>
<button type="button" class="btn btn-secondary" id="LoginInButton">LoginIn</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
在js中判断输入是否符合要求
$("#LoginModalEmail").bind("input propertychange",function () {
if(isValidEMail($("#LoginModalEmail").val())){
if($("#LoginModalEmail").hasClass("is-invalid")){
$("#LoginModalEmail").removeClass("is-invalid");
}
}else{
if(!$("#LoginModalEmail").hasClass("is-invalid")){
$("#LoginModalEmail").addClass("is-invalid");
}
}
});
$("#LoginModalPassword").bind("input propertychange",function () {
if($('#LoginModalPassword').val().length>6){
if($("#LoginModalPassword").hasClass("is-invalid")){
$("#LoginModalPassword").removeClass("is-invalid");
}
}else{
if(!$("#LoginModalPassword").hasClass("is-invalid")){
$("#LoginModalPassword").addClass("is-invalid");
}
}
});
$("#LoginInButton").click(function () {
if(!isValidEMail($("#LoginModalEmail").val())){
if(!$("#LoginModalEmail").hasClass("is-invalid")){
$("#LoginModalEmail").addClass("is-invalid");
}
}else if($('#LoginModalPassword').val().length<=6){
if(!