登录&注册
This commit is contained in:
limqhz
@@ -5,31 +5,117 @@
|
||||
<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="@{/css/login.css}">
|
||||
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrapValidator.css}">
|
||||
<link rel="stylesheet" th:href="@{/css/backgroud.css}">
|
||||
</head>
|
||||
<body class="text-center">
|
||||
|
||||
<form class="form-signin needs-validation" th:action="@{/register}" method="post">
|
||||
<img class="mb-4" th:src="@{/images/logo/logo.png}" alt="" width="72" height="72">
|
||||
<p th:text="${registerMsg}" style="color: red"></p>
|
||||
|
||||
<input type="text" name="username" class="form-control mb-2" placeholder="用户名" pattern="[a-zA-Z0-9]+" required=true>
|
||||
<input type="password" name="password" class="form-control" placeholder="密码" required=true>
|
||||
<input type="password" name="repassword" class="form-control" placeholder="确认密码" required="">
|
||||
<input type="text" name="code" class="form-control" placeholder="邀请码" required=true>
|
||||
|
||||
<button class="btn btn-lg btn-primary btn-block mt-3" type="submit" onclick="this.disabled=true; this.form.submit();">注 册</button>
|
||||
|
||||
<p class="clearfix">
|
||||
<a th:href="@{/toLogin}" class="float-right">已有账号？去登录</a>
|
||||
</p>
|
||||
<p class="badge badge-pill badge-light">©QUINN</p>
|
||||
</form>
|
||||
<a class="to-top badge badge-light">返回顶部</a>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<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="#">
|
||||
<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>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="username">用户名</label>
|
||||
<input id="username" type="text" name="username" class="form-control" placeholder="用户名">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<input id="password" type="password" name="password" class="form-control" placeholder="密码">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="repassword">确认密码</label>
|
||||
<input id="repassword" type="password" name="repassword" class="form-control" placeholder="确认密码">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">email</label>
|
||||
<input id="email" type="text" name="email" class="form-control" placeholder="邮箱">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="code">邀请码</label>
|
||||
<input id="code" type="text" name="code" class="form-control" placeholder="邀请码">
|
||||
</div>
|
||||
<button class="btn btn-dark btn-block" type="submit" onclick="this.disabled=true; this.form.submit();">注 册</button>
|
||||
<p class="mt-1 clearfix">
|
||||
<a style="color: white" th:href="@{/toLogin}" class="float-right text-decoration-none">已有账号？去登录</a>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-4" >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
|
||||
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
|
||||
<script th:src="@{/js/toTop.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 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'
|
||||
},
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}).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>
|
||||
|
||||
Reference in New Issue
Block a user