Files
workspace/code/link56/link56-frontend-new/test.html
T
2025-12-13 17:30:32 +08:00

1202 lines
44 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公司信息与超级管理员注册</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--background: #ffffff;
--foreground: #09090b;
--card: #ffffff;
--card-foreground: #09090b;
--primary: #18181b;
--primary-foreground: #fafafa;
--secondary: #f4f4f5;
--secondary-foreground: #18181b;
--muted: #f4f4f5;
--muted-foreground: #71717a;
--accent: #18181b;
--accent-foreground: #fafafa;
--destructive: #ef4444;
--border: #e4e4e7;
--input: #ffffff;
--ring: #09090b;
--radius: 4px;
--sidebar: #fafafa;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
background-color: var(--background);
color: var(--foreground);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
}
.container {
width: 100%;
max-width: 1100px;
background-color: var(--card);
border: 1px solid var(--border);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
display: flex;
min-height: 680px;
}
.content {
display: flex;
width: 100%;
}
.form-container {
flex: 1;
padding: 40px;
border-right: 1px solid var(--border);
}
.logo-area {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 28px;
}
.logo-icon {
width: 36px;
height: 36px;
background-color: var(--primary);
color: var(--primary-foreground);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
}
.logo-text {
font-size: 21px;
font-weight: 600;
letter-spacing: -0.02em;
}
.progress-bar {
display: flex;
margin-bottom: 35px;
position: relative;
}
.progress-bar::before {
content: '';
position: absolute;
top: 17px;
left: 0;
width: 100%;
height: 1px;
background-color: var(--border);
z-index: 1;
}
.progress-step {
flex: 1;
text-align: center;
position: relative;
z-index: 2;
}
.step-circle {
width: 34px;
height: 34px;
border-radius: 99px;
background-color: var(--muted);
color: var(--muted-foreground);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 8px;
font-weight: 500;
border: 1px solid var(--border);
font-size: 13px;
}
.step-circle.active {
background-color: var(--primary);
color: var(--primary-foreground);
border-color: var(--primary);
}
.step-circle.completed {
background-color: var(--primary);
color: var(--primary-foreground);
border-color: var(--primary);
}
.step-text {
font-size: 12px;
color: var(--muted-foreground);
font-weight: 500;
}
.step-text.active {
color: var(--foreground);
}
.form-section {
display: none;
}
.form-section.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.section-title {
font-size: 17px;
font-weight: 600;
margin-bottom: 23px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.section-subtitle {
color: var(--muted-foreground);
font-size: 13px;
margin-bottom: 21px;
}
.form-group {
margin-bottom: 18px;
}
.form-row {
display: flex;
gap: 16px;
}
.form-row .form-group {
flex: 1;
}
label {
display: block;
margin-bottom: 7px;
font-weight: 500;
color: var(--foreground);
font-size: 13px;
}
.required::after {
content: " *";
color: var(--destructive);
}
input,
select,
textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 13px;
background-color: var(--input);
color: var(--foreground);
transition: border-color 0.15s;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 1px var(--ring);
}
.input-with-icon {
position: relative;
}
.input-with-icon i {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--muted-foreground);
font-size: 13px;
}
.input-with-icon input {
padding-left: 38px;
}
.password-strength {
margin-top: 5px;
height: 3px;
background-color: var(--muted);
border-radius: 2px;
overflow: hidden;
}
.password-strength-bar {
height: 100%;
width: 0;
transition: width 0.3s, background-color 0.3s;
}
.password-hint {
font-size: 11px;
color: var(--muted-foreground);
margin-top: 5px;
}
.terms {
margin-top: 24px;
padding: 15px;
background-color: var(--muted);
border-radius: var(--radius);
border-left: 3px solid var(--primary);
}
.terms label {
display: flex;
align-items: flex-start;
font-weight: normal;
cursor: pointer;
font-size: 13px;
line-height: 1.4;
}
.terms input {
width: auto;
margin-right: 10px;
margin-top: 3px;
}
.terms a {
color: var(--primary);
text-decoration: none;
font-weight: 500;
}
.terms a:hover {
text-decoration: underline;
}
.button-group {
display: flex;
justify-content: space-between;
margin-top: 29px;
}
.btn {
padding: 10px 22px;
border: 1px solid transparent;
border-radius: var(--radius);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-prev {
background-color: transparent;
color: var(--foreground);
border-color: var(--border);
}
.btn-prev:hover {
background-color: var(--muted);
}
.btn-next,
.btn-submit {
background-color: var(--primary);
color: var(--primary-foreground);
border-color: var(--primary);
}
.btn-next:hover,
.btn-submit:hover {
background-color: var(--foreground);
border-color: var(--foreground);
}
.btn-submit {
background-color: var(--primary);
}
.summary {
margin-top: 18px;
padding: 18px;
background-color: var(--muted);
border-radius: var(--radius);
border-left: 3px solid var(--primary);
}
.summary h4 {
font-size: 15px;
font-weight: 600;
margin-bottom: 14px;
color: var(--foreground);
}
.summary-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.summary-item {
display: flex;
flex-direction: column;
}
.summary-label {
color: var(--muted-foreground);
font-size: 12px;
margin-bottom: 3px;
}
.summary-value {
font-weight: 500;
color: var(--foreground);
font-size: 13px;
}
.info-sidebar {
width: 350px;
background-color: var(--sidebar);
padding: 44px 28px;
display: flex;
flex-direction: column;
}
.info-header {
margin-bottom: 36px;
}
.page-title {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.022em;
margin-bottom: 6px;
color: var(--foreground);
}
.page-description {
color: var(--muted-foreground);
font-size: 14px;
line-height: 1.55;
}
.info-sidebar h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 24px;
color: var(--foreground);
}
.info-list {
list-style: none;
flex-grow: 1;
}
.info-item {
padding: 16px 0;
border-bottom: 1px solid var(--border);
}
.info-item:last-child {
border-bottom: none;
}
.info-item-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 9px;
}
.info-icon {
width: 33px;
height: 33px;
background-color: var(--muted);
color: var(--foreground);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
}
.info-title {
font-size: 14px;
font-weight: 600;
color: var(--foreground);
}
.info-content {
color: var(--muted-foreground);
font-size: 13px;
line-height: 1.5;
}
.success-message {
display: none;
text-align: center;
padding: 56px 18px;
}
.success-icon {
width: 66px;
height: 66px;
background-color: var(--primary);
color: var(--primary-foreground);
border-radius: 95px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin: 0 auto 22px;
}
.success-message h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 14px;
color: var(--foreground);
}
.success-message p {
color: var(--muted-foreground);
margin-bottom: 18px;
line-height: 1.5;
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
.admin-account {
background-color: var(--muted);
border-radius: var(--radius);
padding: 16px;
margin-top: 22px;
max-width: 340px;
margin-left: auto;
margin-right: auto;
}
.admin-label {
font-size: 12px;
color: var(--muted-foreground);
margin-bottom: 5px;
}
.admin-email {
font-size: 15px;
font-weight: 600;
color: var(--foreground);
word-break: break-all;
}
@media (max-width: 1060px) {
.container {
max-width: 920px;
}
.form-container {
padding: 32px;
}
.info-sidebar {
width: 310px;
padding: 36px 22px;
}
}
@media (max-width: 820px) {
.content {
flex-direction: column;
}
.form-container {
border-right: none;
border-bottom: 1px solid var(--border);
order: 2;
}
.info-sidebar {
width: 100%;
order: 1;
padding: 32px 28px;
}
.info-header {
margin-bottom: 24px;
}
.form-row {
flex-direction: column;
gap: 0;
}
.summary-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 580px) {
.container {
min-height: auto;
}
.form-container {
padding: 24px;
}
.page-title {
font-size: 22px;
}
.button-group {
flex-direction: column-reverse;
gap: 10px;
}
.btn {
width: 100%;
justify-content: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="form-container">
<div class="logo-area">
<div class="logo-icon">
<i class="fas fa-building"></i>
</div>
<div class="logo-text">CorpRegister</div>
</div>
<div class="progress-bar">
<div class="progress-step">
<div class="step-circle active">1</div>
<div class="step-text active">公司信息</div>
</div>
<div class="progress-step">
<div class="step-circle">2</div>
<div class="step-text">管理员信息</div>
</div>
<div class="progress-step">
<div class="step-circle">3</div>
<div class="step-text">确认提交</div>
</div>
</div>
<!-- 第一步:公司信息 -->
<form id="registrationForm">
<div class="form-section active" id="section-company">
<h2 class="section-title">公司基本信息</h2>
<div class="form-group">
<label for="companyName" class="required">公司全称</label>
<input type="text" id="companyName" required placeholder="请输入公司法定全称">
</div>
<div class="form-row">
<div class="form-group">
<label for="companyType" class="required">公司类型</label>
<select id="companyType" required>
<option value="">请选择公司类型</option>
<option value="private">私营企业</option>
<option value="state-owned">国有企业</option>
<option value="foreign">外资企业</option>
<option value="joint-venture">合资企业</option>
<option value="other">其他</option>
</select>
</div>
<div class="form-group">
<label for="industry" class="required">所属行业</label>
<select id="industry" required>
<option value="">请选择行业</option>
<option value="tech">科技/互联网</option>
<option value="finance">金融/银行</option>
<option value="manufacturing">制造业</option>
<option value="retail">零售/贸易</option>
<option value="service">服务业</option>
<option value="education">教育/培训</option>
<option value="healthcare">医疗健康</option>
<option value="real-estate">房地产</option>
<option value="logistics">物流运输</option>
<option value="other">其他</option>
</select>
</div>
</div>
<div class="form-group">
<label for="companyAddress" class="required">公司地址</label>
<input type="text" id="companyAddress" required placeholder="请输入公司详细地址">
</div>
<div class="form-row">
<div class="form-group">
<label for="phone" class="required">联系电话</label>
<div class="input-with-icon">
<i class="fas fa-phone"></i>
<input type="tel" id="phone" required placeholder="请输入公司联系电话">
</div>
</div>
<div class="form-group">
<label for="companyEmail" class="required">公司邮箱</label>
<div class="input-with-icon">
<i class="fas fa-envelope"></i>
<input type="email" id="companyEmail" required placeholder="请输入公司邮箱">
</div>
</div>
</div>
<div class="form-group">
<label for="website">公司网站</label>
<div class="input-with-icon">
<i class="fas fa-globe"></i>
<input type="url" id="website" placeholder="https://example.com">
</div>
</div>
<div class="form-group">
<label for="companyDesc">公司简介</label>
<textarea id="companyDesc" rows="3" placeholder="请简要描述公司主营业务、规模等信息"></textarea>
</div>
<div class="button-group">
<div></div>
<button type="button" class="btn btn-next" onclick="nextStep()">
<span>下一步</span>
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
<!-- 第二步:管理员信息 -->
<div class="form-section" id="section-admin">
<h2 class="section-title">超级管理员信息</h2>
<p class="section-subtitle">超级管理员将拥有系统的最高权限,请谨慎设置</p>
<div class="form-row">
<div class="form-group">
<label for="adminName" class="required">管理员姓名</label>
<div class="input-with-icon">
<i class="fas fa-user"></i>
<input type="text" id="adminName" required placeholder="请输入管理员真实姓名">
</div>
</div>
<div class="form-group">
<label for="adminEmail" class="required">管理员邮箱</label>
<div class="input-with-icon">
<i class="fas fa-envelope"></i>
<input type="email" id="adminEmail" required placeholder="用于登录系统">
</div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="password" class="required">登录密码</label>
<div class="input-with-icon">
<i class="fas fa-lock"></i>
<input type="password" id="password" required placeholder="至少8位,包含字母和数字">
</div>
<div class="password-strength">
<div class="password-strength-bar" id="passwordStrengthBar"></div>
</div>
<div class="password-hint" id="passwordHint">密码强度:弱</div>
</div>
<div class="form-group">
<label for="confirmPassword" class="required">确认密码</label>
<div class="input-with-icon">
<i class="fas fa-lock"></i>
<input type="password" id="confirmPassword" required placeholder="再次输入密码">
</div>
<div class="password-hint" id="passwordMatchHint"></div>
</div>
</div>
<div class="form-group">
<label for="adminPhone">管理员手机</label>
<div class="input-with-icon">
<i class="fas fa-mobile-alt"></i>
<input type="tel" id="adminPhone" placeholder="用于接收系统通知">
</div>
</div>
<div class="form-group">
<label for="adminPosition">担任职务</label>
<input type="text" id="adminPosition" placeholder="请输入管理员职务">
</div>
<div class="terms">
<label>
<input type="checkbox" id="agreeTerms" required>
<span>我同意并接受 <a href="#">服务条款</a> 和 <a
href="#">隐私政策</a>,并确认所提供的信息真实有效。我了解超级管理员将拥有系统的最高权限,并会妥善保管账户信息。</span>
</label>
</div>
<div class="button-group">
<button type="button" class="btn btn-prev" onclick="prevStep()">
<i class="fas fa-arrow-left"></i>
<span>上一步</span>
</button>
<button type="button" class="btn btn-next" onclick="nextStep()">
<span>下一步</span>
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
<!-- 第三步:确认信息 -->
<div class="form-section" id="section-confirm">
<h2 class="section-title">确认信息</h2>
<p class="section-subtitle">请确认以下信息是否正确,提交后不可更改</p>
<div class="summary">
<h4>公司信息</h4>
<div class="summary-grid">
<div class="summary-item">
<span class="summary-label">公司名称:</span>
<span class="summary-value" id="summary-companyName">-</span>
</div>
<div class="summary-item">
<span class="summary-label">公司类型:</span>
<span class="summary-value" id="summary-companyType">-</span>
</div>
<div class="summary-item">
<span class="summary-label">所属行业:</span>
<span class="summary-value" id="summary-industry">-</span>
</div>
<div class="summary-item">
<span class="summary-label">公司地址:</span>
<span class="summary-value" id="summary-companyAddress">-</span>
</div>
<div class="summary-item">
<span class="summary-label">联系电话:</span>
<span class="summary-value" id="summary-phone">-</span>
</div>
<div class="summary-item">
<span class="summary-label">公司邮箱:</span>
<span class="summary-value" id="summary-companyEmail">-</span>
</div>
</div>
</div>
<div class="summary" style="margin-top: 20px;">
<h4>管理员信息</h4>
<div class="summary-grid">
<div class="summary-item">
<span class="summary-label">管理员姓名:</span>
<span class="summary-value" id="summary-adminName">-</span>
</div>
<div class="summary-item">
<span class="summary-label">管理员邮箱:</span>
<span class="summary-value" id="summary-adminEmail">-</span>
</div>
<div class="summary-item">
<span class="summary-label">管理员手机:</span>
<span class="summary-value" id="summary-adminPhone">-</span>
</div>
<div class="summary-item">
<span class="summary-label">担任职务:</span>
<span class="summary-value" id="summary-adminPosition">-</span>
</div>
</div>
</div>
<div class="button-group">
<button type="button" class="btn btn-prev" onclick="prevStep()">
<i class="fas fa-arrow-left"></i>
<span>上一步</span>
</button>
<button type="button" class="btn btn-submit" onclick="submitForm()">
<i class="fas fa-check"></i>
<span>提交注册</span>
</button>
</div>
</div>
</form>
<!-- 提交成功后的消息 -->
<div class="success-message" id="successMessage">
<div class="success-icon">
<i class="fas fa-check"></i>
</div>
<h2>注册成功!</h2>
<p>公司信息和超级管理员账户已成功创建。</p>
<p>系统初始化邮件已发送至管理员邮箱,请按照邮件指引完成系统初始化设置。</p>
<div class="admin-account">
<div class="admin-label">超级管理员账户</div>
<div class="admin-email" id="successAdminEmail"></div>
</div>
<button class="btn btn-submit" onclick="resetForm()" style="margin-top: 28px;">
<i class="fas fa-plus"></i>
<span>注册新公司</span>
</button>
</div>
</div>
<!-- 侧边栏 -->
<div class="info-sidebar">
<div class="info-header">
<h1 class="page-title">公司信息注册</h1>
<p class="page-description">请填写公司信息并创建超级管理员账户以完成系统初始化设置</p>
</div>
<h3>注册说明</h3>
<ul class="info-list">
<li class="info-item">
<div class="info-item-header">
<div class="info-icon">
<i class="fas fa-building"></i>
</div>
<div class="info-title">公司信息</div>
</div>
<div class="info-content">
请填写公司的法定全称、地址和联系方式,确保信息真实有效,这将用于系统备案和官方文件。
</div>
</li>
<li class="info-item">
<div class="info-item-header">
<div class="info-icon">
<i class="fas fa-user-shield"></i>
</div>
<div class="info-title">超级管理员</div>
</div>
<div class="info-content">
超级管理员拥有系统的最高权限,可以创建和管理其他用户,分配角色和权限,请妥善保管账户信息。
</div>
</li>
<li class="info-item">
<div class="info-item-header">
<div class="info-icon">
<i class="fas fa-lock"></i>
</div>
<div class="info-title">账户安全</div>
</div>
<div class="info-content">
请设置强密码(至少8位,包含字母和数字),建议定期更换密码,不要将账户信息透露给他人。
</div>
</li>
<li class="info-item">
<div class="info-item-header">
<div class="info-icon">
<i class="fas fa-headset"></i>
</div>
<div class="info-title">技术支持</div>
</div>
<div class="info-content">
如果在注册过程中遇到问题,请联系我们的技术支持团队:<br>
电话:400-123-4567<br>
邮箱:support@example.com
</div>
</li>
</ul>
</div>
</div>
</div>
<script>
let currentStep = 1;
const totalSteps = 3;
// 密码强度检查
const passwordInput = document.getElementById('password');
const passwordStrengthBar = document.getElementById('passwordStrengthBar');
const passwordHint = document.getElementById('passwordHint');
const confirmPasswordInput = document.getElementById('confirmPassword');
const passwordMatchHint = document.getElementById('passwordMatchHint');
passwordInput.addEventListener('input', function () {
const password = this.value;
let strength = 0;
let color = '#ef4444';
let text = '弱';
if (password.length >= 8) strength++;
if (/[A-Z]/.test(password)) strength++;
if (/[0-9]/.test(password)) strength++;
if (/[^A-Za-z0-9]/.test(password)) strength++;
if (strength === 1) {
color = '#ef4444';
text = '弱';
} else if (strength === 2 || strength === 3) {
color = '#f59e0b';
text = '中等';
} else if (strength === 4) {
color = '#10b981';
text = '强';
}
passwordStrengthBar.style.width = (strength * 25) + '%';
passwordStrengthBar.style.backgroundColor = color;
passwordHint.textContent = '密码强度:' + text;
passwordHint.style.color = color;
checkPasswordMatch();
});
confirmPasswordInput.addEventListener('input', checkPasswordMatch);
function checkPasswordMatch() {
const password = passwordInput.value;
const confirmPassword = confirmPasswordInput.value;
if (confirmPassword === '') {
passwordMatchHint.textContent = '';
passwordMatchHint.style.color = '#71717a';
return;
}
if (password === confirmPassword) {
passwordMatchHint.textContent = '✓ 密码匹配';
passwordMatchHint.style.color = '#10b981';
} else {
passwordMatchHint.textContent = '✗ 密码不匹配';
passwordMatchHint.style.color = '#ef4444';
}
}
// 表单步骤导航
function nextStep() {
if (!validateCurrentStep()) return;
// 更新步骤指示器
document.querySelectorAll('.step-circle')[currentStep - 1].classList.remove('active');
document.querySelectorAll('.step-circle')[currentStep - 1].classList.add('completed');
document.querySelectorAll('.step-text')[currentStep - 1].classList.remove('active');
// 隐藏当前步骤
document.querySelector('.form-section.active').classList.remove('active');
// 显示下一步
currentStep++;
document.querySelectorAll('.step-circle')[currentStep - 1].classList.add('active');
document.querySelectorAll('.step-text')[currentStep - 1].classList.add('active');
document.getElementById(`section-${getSectionName(currentStep)}`).classList.add('active');
// 如果是最后一步,更新摘要信息
if (currentStep === 3) {
updateSummary();
}
}
function prevStep() {
// 更新步骤指示器
document.querySelectorAll('.step-circle')[currentStep - 1].classList.remove('active');
document.querySelectorAll('.step-text')[currentStep - 1].classList.remove('active');
// 隐藏当前步骤
document.querySelector('.form-section.active').classList.remove('active');
// 显示上一步
currentStep--;
document.querySelectorAll('.step-circle')[currentStep - 1].classList.add('active');
document.querySelectorAll('.step-circle')[currentStep - 1].classList.remove('completed');
document.querySelectorAll('.step-text')[currentStep - 1].classList.add('active');
document.getElementById(`section-${getSectionName(currentStep)}`).classList.add('active');
}
function getSectionName(step) {
switch (step) {
case 1: return 'company';
case 2: return 'admin';
case 3: return 'confirm';
default: return 'company';
}
}
// 验证当前步骤
function validateCurrentStep() {
if (currentStep === 1) {
const requiredFields = ['companyName', 'companyType', 'industry', 'companyAddress', 'phone', 'companyEmail'];
for (let fieldId of requiredFields) {
const field = document.getElementById(fieldId);
if (!field.value.trim()) {
showError(field, `请填写${field.previousElementSibling.textContent.replace(' *', '')}`);
return false;
}
}
// 验证邮箱格式
const emailField = document.getElementById('companyEmail');
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailField.value)) {
showError(emailField, '请输入有效的公司邮箱地址');
return false;
}
clearErrors();
} else if (currentStep === 2) {
const requiredFields = ['adminName', 'adminEmail', 'password', 'confirmPassword'];
for (let fieldId of requiredFields) {
const field = document.getElementById(fieldId);
if (!field.value.trim()) {
showError(field, `请填写${field.previousElementSibling.textContent.replace(' *', '')}`);
return false;
}
}
// 验证邮箱格式
const emailField = document.getElementById('adminEmail');
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailField.value)) {
showError(emailField, '请输入有效的管理员邮箱地址');
return false;
}
// 验证密码
const password = document.getElementById('password').value;
if (password.length < 8) {
showError(document.getElementById('password'), '密码长度至少为8位');
return false;
}
if (!/(?=.*[A-Za-z])(?=.*\d)/.test(password)) {
showError(document.getElementById('password'), '密码必须包含字母和数字');
return false;
}
// 验证密码匹配
if (password !== document.getElementById('confirmPassword').value) {
showError(document.getElementById('confirmPassword'), '两次输入的密码不匹配');
return false;
}
// 验证条款同意
if (!document.getElementById('agreeTerms').checked) {
alert('请同意服务条款和隐私政策');
return false;
}
clearErrors();
}
return true;
}
function showError(inputElement, message) {
// 清除之前的错误样式
inputElement.classList.remove('error');
// 添加错误样式
inputElement.classList.add('error');
inputElement.style.borderColor = '#ef4444';
inputElement.style.boxShadow = '0 0 0 1px rgba(239, 68, 68, 0.2)';
// 显示错误消息
alert(message);
inputElement.focus();
}
function clearErrors() {
const errorElements = document.querySelectorAll('.error');
errorElements.forEach(element => {
element.classList.remove('error');
element.style.borderColor = '';
element.style.boxShadow = '';
});
}
// 更新摘要信息
function updateSummary() {
document.getElementById('summary-companyName').textContent = document.getElementById('companyName').value || '-';
document.getElementById('summary-companyType').textContent = document.getElementById('companyType').options[document.getElementById('companyType').selectedIndex].text || '-';
document.getElementById('summary-industry').textContent = document.getElementById('industry').options[document.getElementById('industry').selectedIndex].text || '-';
document.getElementById('summary-companyAddress').textContent = document.getElementById('companyAddress').value || '-';
document.getElementById('summary-phone').textContent = document.getElementById('phone').value || '-';
document.getElementById('summary-companyEmail').textContent = document.getElementById('companyEmail').value || '-';
document.getElementById('summary-adminName').textContent = document.getElementById('adminName').value || '-';
document.getElementById('summary-adminEmail').textContent = document.getElementById('adminEmail').value || '-';
document.getElementById('summary-adminPhone').textContent = document.getElementById('adminPhone').value || '-';
document.getElementById('summary-adminPosition').textContent = document.getElementById('adminPosition').value || '-';
}
// 提交表单
function submitForm() {
// 在实际应用中,这里会发送数据到服务器
// 这里我们只模拟提交成功
document.querySelector('.form-container').style.display = 'none';
document.getElementById('successMessage').style.display = 'block';
document.getElementById('successAdminEmail').textContent = document.getElementById('adminEmail').value;
}
// 重置表单
function resetForm() {
// 重置所有表单字段
document.getElementById('registrationForm').reset();
// 重置步骤指示器
currentStep = 1;
document.querySelectorAll('.step-circle').forEach((circle, index) => {
circle.classList.remove('active', 'completed');
if (index === 0) circle.classList.add('active');
});
document.querySelectorAll('.step-text').forEach((text, index) => {
text.classList.remove('active');
if (index === 0) text.classList.add('active');
});
// 重置表单显示
document.querySelectorAll('.form-section').forEach(section => {
section.classList.remove('active');
});
document.getElementById('section-company').classList.add('active');
// 重置UI状态
document.querySelector('.form-container').style.display = 'block';
document.getElementById('successMessage').style.display = 'none';
passwordStrengthBar.style.width = '0%';
passwordHint.textContent = '密码强度:弱';
passwordMatchHint.textContent = '';
clearErrors();
}
</script>
</body>
</html>