|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
|
|
|
<head>
|
|
|
<meta charset="UTF-8"/>
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
|
|
|
<meta name="description" content="gym-management-system"/>
|
|
|
<meta name="author" content=" "/>
|
|
|
<title>健身房管理系统-注册</title>
|
|
|
<link href="/static/css/styles.css" th:href="@{css/styles.css}" rel="stylesheet"/>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"
|
|
|
crossorigin="anonymous"></script>
|
|
|
<script type="text/javascript">
|
|
|
var count = 0;
|
|
|
function checkSubmit(registrationForm) {
|
|
|
// 检查姓名
|
|
|
if (registrationForm.memberName.value == '') {
|
|
|
alert("请输入姓名");
|
|
|
registrationForm.memberName.focus();
|
|
|
count++;
|
|
|
return false;
|
|
|
}
|
|
|
// 检查密码
|
|
|
var password = registrationForm.memberPassword.value;
|
|
|
if (password == '') {
|
|
|
alert("请输入密码");
|
|
|
registrationForm.memberPassword.focus();
|
|
|
count++;
|
|
|
return false;
|
|
|
}
|
|
|
// 检查密码强度：必须包含字母和数字，且长度必须为8个字符
|
|
|
var passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8}$/;
|
|
|
if (!passwordPattern.test(password)) {
|
|
|
alert("密码必须包含一个字母和一个数字，并且长度为8个字符");
|
|
|
registrationForm.memberPassword.focus();
|
|
|
count++;
|
|
|
return false;
|
|
|
}
|
|
|
// 检查确认密码
|
|
|
var confirmPassword = registrationForm.confirmPassword.value;
|
|
|
if (confirmPassword == '') {
|
|
|
alert("请输入确认密码");
|
|
|
registrationForm.confirmPassword.focus();
|
|
|
count++;
|
|
|
return false;
|
|
|
}
|
|
|
if (password !== confirmPassword) {
|
|
|
alert("两次输入的密码不一致");
|
|
|
registrationForm.confirmPassword.focus();
|
|
|
count++;
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 检查性别
|
|
|
if (registrationForm.memberGender.value == '') {
|
|
|
alert("请选择性别");
|
|
|
registrationForm.memberGender.focus();
|
|
|
count++;
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 检查年龄范围
|
|
|
var age = registrationForm.memberAge.value;
|
|
|
if (age == '' || age < 16 || age > 80) {
|
|
|
alert("年龄必须在16到80岁之间");
|
|
|
registrationForm.memberAge.focus();
|
|
|
count++;
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 检查身高是否为负数
|
|
|
var height = registrationForm.memberHeight.value;
|
|
|
if (height == '' || height <= 0) {
|
|
|
alert("请输入有效的身高");
|
|
|
registrationForm.memberHeight.focus();
|
|
|
count++;
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 检查体重是否为负数
|
|
|
var weight = registrationForm.memberWeight.value;
|
|
|
if (weight == '' || weight <= 0) {
|
|
|
alert("请输入有效的体重");
|
|
|
registrationForm.memberWeight.focus();
|
|
|
count++;
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 检查手机号码
|
|
|
var phonePattern = /^1[3-9]\d{9}$/;
|
|
|
var memberPhone = registrationForm.memberPhone.value;
|
|
|
if (memberPhone == '') {
|
|
|
alert("请输入电话号码");
|
|
|
registrationForm.memberPhone.focus();
|
|
|
count++;
|
|
|
return false;
|
|
|
} else if (!phonePattern.test(memberPhone)) {
|
|
|
alert("请输入有效的手机号码");
|
|
|
registrationForm.memberPhone.focus();
|
|
|
count++;
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
function check(registrationForm) {
|
|
|
var result = checkSubmit(registrationForm);
|
|
|
if (result) {
|
|
|
alert("注册成功,即将进入用户界面！");
|
|
|
return true;
|
|
|
}
|
|
|
return false;
|
|
|
}
|
|
|
</script>
|
|
|
</head>
|
|
|
<body class="bg-primary" th:style="'background-image: url(/img/background.jpeg);background-size: 100%, 100%'">
|
|
|
<div id="layoutAuthentication">
|
|
|
<div id="layoutAuthentication_content">
|
|
|
<main>
|
|
|
<div class="container">
|
|
|
<div class="row justify-content-center">
|
|
|
<div class="col-lg-7">
|
|
|
<div class="card shadow-lg border-0 rounded-lg mt-5">
|
|
|
<div class="card-header"><h3 class="text-center font-weight-light my-4">注册</h3></div>
|
|
|
<div class="card-body">
|
|
|
<form th:action="@{/addUser}" method="post" name="addForm" onsubmit="return check(this)">
|
|
|
<!-- 姓名输入框 -->
|
|
|
<div class="form-floating mb-3">
|
|
|
<input class="form-control" id="inputName" name="memberName" type="text" placeholder="姓名" required />
|
|
|
<label for="inputName">姓名</label>
|
|
|
</div>
|
|
|
<!-- 密码输入框 -->
|
|
|
<div class="form-floating mb-3">
|
|
|
<input class="form-control" id="inputPassword" name="memberPassword" type="password" placeholder="密码" required />
|
|
|
<label for="inputPassword">8位密码(必须包含字母跟数字)</label>
|
|
|
</div>
|
|
|
<!-- 确认密码输入框 -->
|
|
|
<div class="form-floating mb-3">
|
|
|
<input class="form-control" id="inputConfirmPassword" name="confirmPassword" type="password" placeholder="确认密码" required />
|
|
|
<label for="inputConfirmPassword">确认密码</label>
|
|
|
</div>
|
|
|
<!-- 性别选择 -->
|
|
|
<div class="form-floating mb-3">
|
|
|
<select class="form-select" id="inputGender" name="memberGender" required>
|
|
|
<option value="">选择性别</option>
|
|
|
<option value="男">男</option>
|
|
|
<option value="女">女</option>
|
|
|
</select>
|
|
|
<label for="inputGender">性别</label>
|
|
|
</div>
|
|
|
<!-- 年龄输入框 -->
|
|
|
<div class="form-floating mb-3">
|
|
|
<input class="form-control" id="inputAge" name="memberAge" type="number" placeholder="年龄" required />
|
|
|
<label for="inputAge">年龄（18-80）</label>
|
|
|
</div>
|
|
|
<!-- 身高输入框 -->
|
|
|
<div class="form-floating mb-3">
|
|
|
<input class="form-control" id="inputHeight" name="memberHeight" type="number" placeholder="身高(cm)" required />
|
|
|
<label for="inputHeight">身高cm</label>
|
|
|
</div>
|
|
|
<!-- 体重输入框 -->
|
|
|
<div class="form-floating mb-3">
|
|
|
<input class="form-control" id="inputWeight" name="memberWeight" type="number" placeholder="体重(kg)" required />
|
|
|
<label for="inputWeight">体重kg</label>
|
|
|
</div>
|
|
|
<!-- 电话号码输入框 -->
|
|
|
<div class="form-floating mb-3">
|
|
|
<input class="form-control" id="inputPhone" name="memberPhone" type="tel" placeholder="电话号码" required />
|
|
|
<label for="inputPhone">电话号码</label>
|
|
|
</div>
|
|
|
<!-- 提交按钮 -->
|
|
|
<div class="d-flex align-items-center justify-content-between mt-4 mb-0">
|
|
|
<input type="submit" class="btn btn-success" value="注册">
|
|
|
<a class="btn btn-primary" th:href="@{/}">返回</a>
|
|
|
</div>
|
|
|
</form>
|
|
|
<div th:text="${msg}" style="margin-top: 20px;text-align: center;color: red"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
|
|
|
crossorigin="anonymous"></script>
|
|
|
<script src="/static/js/scripts.js" th:src="@{js/scripts.js}"></script>
|
|
|
</body>
|
|
|
</html>
|
