limqsh/quinn-bbc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

基板

Browse Source
This commit is contained in:
limqhz
2022-05-14 01:14:16 +08:00
parent a3df75bd66
commit 9e1dd3af77
31 changed files with 625 additions and 2240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/main/resources/templates/register.html
View File

@@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>注册-Quinn</title>
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrapValidator.css}">
<link rel="stylesheet" th:href="@{/css/backgroud.css}">
</head>
<body>
@@ -14,32 +13,32 @@
<div class="col-md-4" >
</div>
<div class="col-md-4 mt-5" id='login_box'>
<form id="registerForm" class="form-horizontal" method="post" action="#">
<form id="registerForm" class="form-horizontal was-validated" method="post" noValidate>
<div class="justify-content-center">
<h1 class="d-block">注册<small style="font-size: small">Quinn</small></h1>
<p class="d-block" th:text="${registerMsg}" style="color: red"></p>
<h1>注册<small style="font-size: small">Quinn</small></h1>
<p th:text="${registerMsg}" style="color: red"></p>
</div>
<div class="form-group">
<label for="username">用户名</label>
<input id="username" type="text" name="username" class="form-control" placeholder="用户名">
<input id="username" type="text" name="username" class="form-control" placeholder="用户名" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input id="password" type="password" name="password" class="form-control" placeholder="密码">
<input id="password" type="password" name="password" class="form-control" placeholder="密码" required>
</div>
<div class="form-group">
<label for="repassword">确认密码</label>
<input id="repassword" type="password" name="repassword" class="form-control" placeholder="确认密码">
<input id="repassword" type="password" name="repassword" class="form-control" placeholder="确认密码" required>
</div>
<div class="form-group">
<label for="email">email</label>
<input id="email" type="text" name="email" class="form-control" placeholder="邮箱">
<input id="email" type="text" name="email" class="form-control" placeholder="邮箱" pattern="^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+" required>
</div>
<div class="form-group">
<label for="code">邀请码</label>
<input id="code" type="text" name="code" class="form-control" placeholder="邀请码">
<input id="code" type="text" name="code" class="form-control" placeholder="邀请码" required>
</div>
<button class="btn btn-dark btn-block" type="submit" onclick="this.disabled=true; this.form.submit();">注 册</button>
<button class="btn btn-dark btn-block" type="button" onclick="javascript:registerSubmit();">注 册</button>
<p class="mt-1 clearfix">
<a style="color: white" th:href="@{/toLogin}" class="float-right text-decoration-none">已有账号？去登录</a>
</p>
@@ -53,69 +52,52 @@
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/jquery-ui.min.js}"></script>
<script th:src="@{/live/js/addlive2d.js}"></script>
<script th:src="@{/bootstrap/js/bootstrapValidator.js}"></script>
<script th:src="@{/layer/mobile/layer.js}"></script>
<script type="text/javascript">
$(function(){
$('#registerForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
function registerSubmit(){
let username = $('#username').val();
let password = $('#password').val();
let repassword = $('#repassword').val();
let email = $('#email').val();
let code = $('#code').val();
if (!username){
layer.open({ content: '用户名不能为空', skin: 'msg', time: 2 });
return;
}
if (!password){
layer.open({ content: '密码不能为空', skin: 'msg', time: 2 });
return;
}
if (!code){
layer.open({ content: '注册码不能为空！', skin: 'msg', time: 2 });
return;
}
var reEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
if (!reEmail.test(email)){
layer.open({ content: '邮箱格式不正确！', skin: 'msg', time: 2 });
return;
}
if (repassword != password){
layer.open({ content: '两次输入密码不一致', skin: 'msg', time: 2 });
return;
}
if (!code || code.length != 6){
layer.open({ content: '注册码格式不正确', skin: 'msg', time: 2 });
return;
}
$.ajax({
url: "/register",
async: false,
type: "post",
data: {"username":username,"password":password,"repassword":repassword,"email":email,"code":code},
success: function (data) {
layer.open({ content: data, skin: 'msg', time: 2 });
},
fields: {
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and can\'t be empty'
}
}
}
fail: function (error){
layer.open({ content: error, skin: 'msg', time: 2 });
}
}).on('success.form.bv', function(e) {
alert(e);
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
});
})
}
</script>
</body>
</html>