jdysya/Family-Tree
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(register): 优化移动设备适配并添加密码匹配验证

Browse Source 
- 修改移动端响应式布局，确保页面在小屏设备上的可用性
- 添加密码匹配错误提示，提高用户注册体验
- 实现密码输入实时验证和表单提交前验证
This commit is contained in:
高手 2025-02-17 10:35:54 +08:00
parent 293f30bd87
commit 92956b84ab
1 changed files with 66 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
gateway/templates/register.html
View File

@ -65,7 +65,7 @@
box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2); box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
} }
/* 新增响应式设计 */ /* 修改移动端响应式布局 */
@media (max-width: 480px) { @media (max-width: 480px) {
body { body {
padding: 1rem; padding: 1rem;
@ -73,9 +73,14 @@
.login-container { .login-container {
padding: 1.5rem; padding: 1.5rem;
margin-top: 2rem; margin-top: 2rem;
width: calc(100% - 2rem); /* 确保容器不会超出屏幕 */
} }
.form-group-row { .form-group-row {
grid-template-columns: 1fr; /* 移动端单列布局 */ grid-template-columns: 1fr; /* 移动端单列布局 */
gap: 0.5rem;
}
input, select {
font-size: 16px; /* 防止iOS自动放大输入框 */
} }
} }
@ -177,31 +182,50 @@
.form-select { .form-select {
display: none; display: none;
} }
/* 添加密码匹配提示样式 */
.password-match-error {
color: var(--error-color);
font-size: 0.875rem;
margin-top: 0.25rem;
display: none;
}
.password-match-error.show {
display: block;
}
</style> </style>
</head> </head>
<body> <body>
<div class="login-container"> <div class="login-container">
<h1>新用户注册</h1> <h1>新用户注册</h1>
<form action="/register" method="post"> <form action="/register" method="post" id="registerForm">
<div class="form-group"> <div class="form-group">
<label for="fullname">真实姓名</label> <label for="fullname">真实姓名</label>
<input type="text" id="fullname" name="fullname" required <input type="text" id="fullname" name="fullname" required
placeholder="请输入真实姓名"> placeholder="请输入真实姓名">
</div> </div>
<div class="form-group-row">
<div class="form-group"> <div class="form-group">
<label for="mobile">手机号码</label> <label for="mobile">手机号码</label>
<input type="tel" id="mobile" name="mobile" required <input type="tel" id="mobile" name="mobile" required
pattern="[0-9]{11}" pattern="[0-9]{11}"
placeholder="请输入11位手机号"> placeholder="请输入11位手机号">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="password">登录密码</label> <label for="password">登录密码</label>
<input type="password" id="password" name="password" required <input type="password" id="password" name="password" required
minlength="6" minlength="6"
placeholder="至少6位密码"> placeholder="至少6位密码">
</div> </div>
<div class="form-group">
<label for="confirmPassword">确认密码</label>
<input type="password" id="confirmPassword" name="confirmPassword" required
minlength="6"
placeholder="请再次输入密码">
<div class="password-match-error">两次输入的密码不一致</div>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -223,5 +247,32 @@
<p class="error-message">{{ .error }}</p> <p class="error-message">{{ .error }}</p>
{{ end }} {{ end }}
</div> </div>
<script>
const form = document.getElementById('registerForm');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');
const errorDiv = document.querySelector('.password-match-error');
// 实时检查密码匹配
function checkPasswords() {
if (confirmPassword.value && password.value !== confirmPassword.value) {
errorDiv.classList.add('show');
return false;
}
errorDiv.classList.remove('show');
return true;
}
confirmPassword.addEventListener('input', checkPasswords);
password.addEventListener('input', checkPasswords);
// 表单提交验证
form.addEventListener('submit', function(e) {
if (!checkPasswords()) {
e.preventDefault();
}
});
</script>
</body> </body>
</html> </html>