bwadmin/QueryCarInfo2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20250922

Browse Source
This commit is contained in:
bwadmin
2025-09-22 07:33:37 +08:00
parent b34e97b93b
commit 0cae9749a8
19 changed files with 2557 additions and 1225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/register.html
+192 -90
View File
@@ -4,103 +4,205 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>车主信息查询系统 - 注册</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Layui CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
<!-- 引入Font Awesome -->
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
<!-- 引入自定义CSS -->
<link href="{{ url_for('static', filename='css/custom.css') }}" rel="stylesheet">
<!-- 配置Tailwind CSS -->
<!-- 引入Layui JS -->
<script src="{{ url_for('static', filename='layui.js') }}"></script>
</head>
<body>
<!-- 引入统一的顶部导航栏 -->
{% include 'header.html' %}
<!-- 主要内容区域 -->
<div class="content-container">
<div class="content-wrapper">
<div class="card">
<div class="card-header">
<i class="fa fa-user-plus"></i> 用户注册
</div>
<div class="card-body">
<!-- 消息提示区域 -->
{% if error %}
<div class="layui-bg-red message-box">
<i class="fa fa-exclamation-circle"></i> {{ error }}
</div>
{% endif %}
{% if success %}
<div class="layui-bg-green message-box">
<i class="fa fa-check-circle"></i> {{ success }}
</div>
{% endif %}
<div class="layui-text" style="text-align: center; margin-bottom: 20px;">
<div style="width: 80px; height: 80px; background-color: #f2f2f2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
<i class="fa fa-user-plus" style="font-size: 40px; color: #009688;"></i>
</div>
<p style="color: #666;">请填写以下信息完成注册</p>
</div>
<!-- 表单 -->
<form class="layui-form" id="registerForm" method="POST" style="max-width: 500px; margin: 0 auto;">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" required lay-verify="required|username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" id="name" name="name" required lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联系电话</label>
<div class="layui-input-block">
<input type="tel" id="phone" name="phone" required lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">部门名称</label>
<div class="layui-input-block">
<input type="text" id="department" name="department" required lay-verify="required" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" id="password" name="password" required lay-verify="required|password" placeholder="请设置密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-block">
<input type="password" id="confirm_password" name="confirm_password" required lay-verify="required|confirmPassword" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit lay-filter="registerForm"><i class="fa fa-check"></i> 注册</button>
<button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh"></i> 重置</button>
</div>
</div>
<div class="layui-form-item" style="text-align: center;">
<a href="{{ url_for('user.login') }}" class="layui-link">已有账号？返回登录</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
{% include 'footer.html' %}
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1890ff',
secondary: '#f5f7fa',
success: '#52c41a',
warning: '#faad14',
error: '#f5222d',
info: '#8c8c8c'
},
fontFamily: {
sans: ['Microsoft YaHei', 'Arial', 'sans-serif']
}
layui.use(['form', 'layer'], function(){
var form = layui.form;
var layer = layui.layer;
// 表单验证
form.verify({
username: function(value){
if(value.length < 3){
return '用户名至少3个字符';
}
},
phone: [
/^1\d{10}$/,
'请输入正确的手机号'
],
password: [
/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
'密码长度至少8位，且必须包含字母和数字'
],
confirmPassword: function(value){
var password = document.getElementById('password').value;
if(value !== password){
return '两次输入的密码不一致';
}
}
});
// 表单提交
form.on('submit(registerForm)', function(data){
// 添加加载状态
var submitButton = document.querySelector('button[type="submit"]');
var originalText = submitButton.innerHTML;
submitButton.disabled = true;
submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 提交中...';
// 延迟提交以显示加载状态
setTimeout(function(){
document.getElementById('registerForm').submit();
}, 500);
return false;
});
// 密码可见性切换功能
function togglePasswordVisibility(inputId) {
var input = document.getElementById(inputId);
var icon = document.getElementById(inputId + '_icon');
if (input.type === 'password') {
input.type = 'text';
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
} else {
input.type = 'password';
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
}
}
// 为输入框添加密码可见性切换图标
function addPasswordToggleIcons() {
var passwordInputs = document.querySelectorAll('input[type="password"]');
passwordInputs.forEach(function(input) {
var parent = input.parentElement;
var toggleBtn = document.createElement('i');
toggleBtn.id = input.id + '_icon';
toggleBtn.className = 'fa fa-eye layui-icon layui-input-icon-right password-toggle-icon';
toggleBtn.style.position = 'absolute';
toggleBtn.style.right = '10px';
toggleBtn.style.top = '50%';
toggleBtn.style.transform = 'translateY(-50%)';
toggleBtn.style.cursor = 'pointer';
toggleBtn.style.color = '#999';
// 为容器添加相对定位
parent.style.position = 'relative';
// 添加点击事件
toggleBtn.addEventListener('click', function() {
togglePasswordVisibility(input.id);
});
// 检查是否已存在图标
if (!document.getElementById(input.id + '_icon')) {
parent.appendChild(toggleBtn);
// 为输入框添加右侧内边距，防止文字被图标遮挡
input.style.paddingRight = '30px';
}
});
}
// 页面加载完成后执行
window.onload = function() {
// 添加密码可见性切换图标
addPasswordToggleIcons();
// 重新渲染表单
form.render();
};
});
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.input-focus {
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
}
}
</style>
</head>
<body class="bg-secondary min-h-screen font-sans flex justify-center items-center">
<div class="bg-white rounded-lg shadow-md p-8 w-full max-w-md">
<div class="text-center mb-8">
<h1 class="text-2xl font-bold text-gray-800">车主信息查询系统</h1>
<p class="text-gray-600 mt-2">用户注册</p>
</div>
<form method="POST">
<div class="flex gap-4 mb-6">
<div class="flex-1">
<label for="username" class="block text-gray-700 font-medium mb-2">用户名</label>
<input type="text" id="username" name="username" required placeholder="请输入用户名"
class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus">
</div>
<div class="flex-1">
<label for="name" class="block text-gray-700 font-medium mb-2">姓名</label>
<input type="text" id="name" name="name" required placeholder="请输入真实姓名"
class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus">
</div>
</div>
<div class="flex gap-4 mb-6">
<div class="flex-1">
<label for="phone" class="block text-gray-700 font-medium mb-2">联系电话</label>
<input type="tel" id="phone" name="phone" required placeholder="请输入联系电话"
class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus">
</div>
<div class="flex-1">
<label for="department" class="block text-gray-700 font-medium mb-2">部门名称</label>
<input type="text" id="department" name="department" required placeholder="请输入部门名称"
class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus">
</div>
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 font-medium mb-2">密码</label>
<input type="password" id="password" name="password" required placeholder="请设置密码"
class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus">
</div>
<div class="mb-6">
<label for="confirm_password" class="block text-gray-700 font-medium mb-2">确认密码</label>
<input type="password" id="confirm_password" name="confirm_password" required placeholder="请再次输入密码"
class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus">
</div>
{% if error %}
<div class="text-error text-center mb-4">
{{ error }}
</div>
{% endif %}
{% if success %}
<div class="text-success text-center mb-4">
{{ success }}
</div>
{% endif %}
<button type="submit"
class="w-full py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors duration-300 font-medium">
注册
</button>
<div class="mt-4 text-center">
<a href="/" class="text-primary hover:text-primary/80 transition-colors hover:underline">已有账号？返回登录</a>
</div>
</form>
</div>
</body>
</html>