docs: 更新项目文档，完善需求和技术细节
This commit is contained in:
ylweng
@@ -3,6 +3,22 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="联系我们 - 爱鉴花团队很乐意听取您的意见和建议，您可以通过在线表单、电话或邮件与我们取得联系。">
|
||||
<meta name="keywords" content="联系我们,在线留言,客服支持,爱鉴花团队">
|
||||
<meta name="author" content="爱鉴花团队">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="联系我们 - 爱鉴花">
|
||||
<meta property="og:description" content="联系我们 - 爱鉴花团队很乐意听取您的意见和建议。">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://aijianhua.com/contact.html">
|
||||
<meta property="og:image" content="https://aijianhua.com/images/contact-og.png">
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="联系我们 - 爱鉴花">
|
||||
<meta name="twitter:description" content="联系我们 - 爱鉴花团队很乐意听取您的意见和建议。">
|
||||
|
||||
<title>联系我们 - 爱鉴花</title>
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
|
||||
@@ -57,119 +73,84 @@
|
||||
<section class="py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<!-- 联系表单 -->
|
||||
<div class="card border-0 shadow-sm mb-5">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body p-5">
|
||||
<h2 class="fw-bold mb-4 text-dark">发送消息</h2>
|
||||
<h2 class="card-title text-center mb-4">发送消息</h2>
|
||||
<form id="contactForm">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="name" class="form-label">姓名 *</label>
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="name" required>
|
||||
<div class="invalid-feedback">请输入您的姓名</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="email" class="form-label">邮箱 *</label>
|
||||
<div class="col-md-6">
|
||||
<label for="email" class="form-label">邮箱 <span class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" id="email" required>
|
||||
<div class="invalid-feedback">请输入有效的邮箱地址</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="phone" class="form-label">电话</label>
|
||||
<input type="tel" class="form-control" id="phone">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="subject" class="form-label">主题 <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="subject" required>
|
||||
<div class="invalid-feedback">请输入消息主题</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="message" class="form-label">消息内容 <span class="text-danger">*</span></label>
|
||||
<textarea class="form-control" id="message" rows="5" required></textarea>
|
||||
<div class="invalid-feedback">请输入消息内容</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="privacyPolicy" required>
|
||||
<label class="form-check-label" for="privacyPolicy">
|
||||
我同意 <a href="#" class="text-primary">隐私政策</a> 和 <a href="#" class="text-primary">服务条款</a> <span class="text-danger">*</span>
|
||||
</label>
|
||||
<div class="invalid-feedback">请同意隐私政策和服务条款</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<button type="submit" class="btn btn-primary btn-lg px-5">发送消息</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="phone" class="form-label">电话</label>
|
||||
<input type="tel" class="form-control" id="phone">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="subject" class="form-label">主题 *</label>
|
||||
<select class="form-select" id="subject" required>
|
||||
<option value="">请选择主题</option>
|
||||
<option value="general">一般咨询</option>
|
||||
<option value="technical">技术支持</option>
|
||||
<option value="business">商务合作</option>
|
||||
<option value="feedback">产品反馈</option>
|
||||
<option value="other">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="message" class="form-label">消息内容 *</label>
|
||||
<textarea class="form-control" id="message" rows="5" required></textarea>
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="agree" required>
|
||||
<label class="form-check-label" for="agree">
|
||||
我同意<a href="#" class="text-primary">隐私政策</a>
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-lg w-100">发送消息</button>
|
||||
<div class="mt-3 text-center">
|
||||
<small class="text-muted">我们将在24小时内回复您的消息</small>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 表单提交成功提示 -->
|
||||
<div class="alert alert-success mt-4 d-none" id="successAlert">
|
||||
<i class="fas fa-check-circle me-2"></i>
|
||||
消息发送成功！我们会尽快与您联系。
|
||||
</div>
|
||||
|
||||
<!-- 表单提交失败提示 -->
|
||||
<div class="alert alert-danger mt-4 d-none" id="errorAlert">
|
||||
<i class="fas fa-exclamation-circle me-2"></i>
|
||||
发送失败，请检查表单内容后重试。
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<!-- 联系信息卡片 -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-primary text-white rounded-circle mx-auto mb-3">
|
||||
<div class="col-md-4">
|
||||
<div class="card contact-card border-0 shadow-sm h-100 text-center">
|
||||
<div class="card-body p-4">
|
||||
<div class="contact-icon bg-primary text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-map-marker-alt fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold">公司地址</h5>
|
||||
<p class="text-muted">
|
||||
北京市海淀区中关村大街<br>
|
||||
科技园区A座1001室
|
||||
</p>
|
||||
<h5 class="card-title">公司地址</h5>
|
||||
<p class="card-text">北京市海淀区中关村大街1号<br>海龙大厦15层</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-success text-white rounded-circle mx-auto mb-3">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card contact-card border-0 shadow-sm h-100 text-center">
|
||||
<div class="card-body p-4">
|
||||
<div class="contact-icon bg-success text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-phone fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold">联系电话</h5>
|
||||
<p class="text-muted">
|
||||
400-123-4567<br>
|
||||
+86 10-8888-7777
|
||||
</p>
|
||||
<h5 class="card-title">联系电话</h5>
|
||||
<p class="card-text">客服热线：400-123-4567<br>工作时间：周一至周五 9:00-18:00</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-info text-white rounded-circle mx-auto mb-3">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card contact-card border-0 shadow-sm h-100 text-center">
|
||||
<div class="card-body p-4">
|
||||
<div class="contact-icon bg-info text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-envelope fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold">电子邮箱</h5>
|
||||
<p class="text-muted">
|
||||
contact@aijianhua.com<br>
|
||||
support@aijianhua.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="feature-icon bg-warning text-white rounded-circle mx-auto mb-3">
|
||||
<i class="fas fa-clock fa-2x"></i>
|
||||
</div>
|
||||
<h5 class="fw-bold">工作时间</h5>
|
||||
<p class="text-muted">
|
||||
周一至周五: 9:00-18:00<br>
|
||||
周末: 10:00-16:00
|
||||
</p>
|
||||
<h5 class="card-title">电子邮箱</h5>
|
||||
<p class="card-text">商务合作：business@aijianhua.com<br>技术支持：support@aijianhua.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -177,115 +158,33 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 地图 -->
|
||||
<section class="bg-light py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<h2 class="display-5 fw-bold text-dark">我们的位置</h2>
|
||||
<p class="lead text-muted">欢迎来访我们的办公室</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
<!-- 地图占位图 -->
|
||||
<div class="map-placeholder bg-secondary text-white text-center py-5">
|
||||
<i class="fas fa-map-marked-alt fa-4x mb-3"></i>
|
||||
<h4>地图位置</h4>
|
||||
<p>北京市海淀区中关村大街科技园区A座</p>
|
||||
<small class="text-white-50">（实际部署时可集成百度地图或高德地图）</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 常见问题 -->
|
||||
<!-- 在线地图 -->
|
||||
<section class="py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center mb-5">
|
||||
<h2 class="display-5 fw-bold text-dark">常见问题</h2>
|
||||
<p class="lead text-muted">快速找到您需要的答案</p>
|
||||
<div class="col-12">
|
||||
<h2 class="text-center display-5 fw-bold text-dark mb-5">公司位置</h2>
|
||||
<div class="ratio ratio-21x9">
|
||||
<iframe src="https://map.baidu.com/" title="公司位置地图" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 社交媒体 -->
|
||||
<section class="bg-light py-5">
|
||||
<div class="container py-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="accordion" id="faqAccordion">
|
||||
<div class="accordion-item border-0 shadow-sm mb-3">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
|
||||
如何开始使用爱鉴花小程序？
|
||||
</button>
|
||||
</h3>
|
||||
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
|
||||
<div class="accordion-body">
|
||||
<p class="text-muted">
|
||||
在微信中搜索"爱鉴花"即可找到我们的小程序，
|
||||
点击进入后即可开始使用花卉识别功能。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item border-0 shadow-sm mb-3">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
|
||||
识别准确率如何？
|
||||
</button>
|
||||
</h3>
|
||||
<div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
|
||||
<div class="accordion-body">
|
||||
<p class="text-muted">
|
||||
我们的AI识别准确率目前达到95%，
|
||||
在良好光线和清晰图片条件下准确率更高。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<h2 class="display-5 fw-bold text-dark mb-4">关注我们</h2>
|
||||
<p class="lead text-muted mb-5">通过社交媒体与我们保持联系</p>
|
||||
<div class="social-contact-links">
|
||||
<a href="#" class="btn btn-primary btn-lg me-3 mb-3"><i class="fab fa-weixin me-2"></i> 微信</a>
|
||||
<a href="#" class="btn btn-info btn-lg me-3 mb-3"><i class="fab fa-weibo me-2"></i> 微博</a>
|
||||
<a href="#" class="btn btn-dark btn-lg mb-3"><i class="fab fa-github me-2"></i> GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="accordion" id="faqAccordion2">
|
||||
<div class="accordion-item border-0 shadow-sm mb-3">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
|
||||
是否支持企业定制？
|
||||
</button>
|
||||
</h3>
|
||||
<div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion2">
|
||||
<div class="accordion-body">
|
||||
<p class="text-muted">
|
||||
是的，我们提供企业定制服务，包括私有化部署、
|
||||
定制模型训练等，请联系商务合作部门。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item border-0 shadow-sm mb-3">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
|
||||
技术支持响应时间？
|
||||
</button>
|
||||
</h3>
|
||||
<div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion2">
|
||||
<div class="accordion-body">
|
||||
<p class="text-muted">
|
||||
普通咨询：24小时内回复<br>
|
||||
紧急问题：4小时内响应<br>
|
||||
企业客户：专属技术支持
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-4">
|
||||
<a href="#" class="btn btn-outline-primary">查看更多问题</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -329,151 +228,95 @@
|
||||
<li><a href="contact.html" class="text-white-50 text-decoration-none">联系我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-4 mb-4">
|
||||
<h6 class="fw-bold mb-3">法律</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-white-50 text-decoration-none">隐私政策</a></li>
|
||||
<li><a href="#" class="text-white-50 text-decoration-none">服务条款</a></li>
|
||||
<li><a href="#" class="text-white-50 text-decoration-none">版权声明</a></li>
|
||||
</ul>
|
||||
<div class="col-lg-4 mb-4">
|
||||
<h6 class="mb-3">联系我们</h6>
|
||||
<p class="text-muted mb-1"><i class="fas fa-map-marker-alt me-2"></i>北京市海淀区中关村大街</p>
|
||||
<p class="text-muted mb-1"><i class="fas fa-phone me-2"></i>400-123-4567</p>
|
||||
<p class="text-muted"><i class="fas fa-envelope me-2"></i>contact@aijianhua.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6 text-center text-md-start">
|
||||
<p class="text-white-50 mb-0">© 2024 爱鉴花. 保留所有权利</p>
|
||||
<p class="text-muted mb-0">© 2024 爱鉴花. 保留所有权利.</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-center text-md-end">
|
||||
<p class="text-white-50 mb-0">
|
||||
<a href="#" class="text-white-50 text-decoration-none me-3">隐私政策</a>
|
||||
<a href="#" class="text-white-50 text-decoration-none me-3">服务条款</a>
|
||||
<a href="#" class="text-white-50 text-decoration-none">京ICP备12345678号</a>
|
||||
<p class="text-muted mb-0">
|
||||
<a href="#" class="text-muted text-decoration-none me-3">隐私政策</a>
|
||||
<a href="#" class="text-muted text-decoration-none me-3">服务条款</a>
|
||||
<a href="#" class="text-muted text-decoration-none">京ICP备12345678号</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mt-3">
|
||||
<p class="text-white-50 small">
|
||||
<p class="text-muted small">
|
||||
友情链接：
|
||||
<a href="#" class="text-white-50 text-decoration-none me-2">中国花卉协会</a>
|
||||
<a href="#" class="text-white-50 text-decoration-none me-2">植物智</a>
|
||||
<a href="#" class="text-white-50 text-decoration-none">园林在线</a>
|
||||
<a href="#" class="text-muted text-decoration-none me-2">中国花卉协会</a>
|
||||
<a href="#" class="text-muted text-decoration-none me-2">植物智</a>
|
||||
<a href="#" class="text-muted text-decoration-none">园林在线</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
<!-- 表单验证脚本 -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
const successAlert = document.getElementById('successAlert');
|
||||
const errorAlert = document.getElementById('errorAlert');
|
||||
// 表单验证
|
||||
document.getElementById('contactForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// 实时表单验证
|
||||
const inputs = contactForm.querySelectorAll('input, textarea, select');
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('blur', function() {
|
||||
validateField(this);
|
||||
});
|
||||
|
||||
input.addEventListener('input', function() {
|
||||
clearValidation(this);
|
||||
});
|
||||
// 获取表单元素
|
||||
const name = document.getElementById('name');
|
||||
const email = document.getElementById('email');
|
||||
const subject = document.getElementById('subject');
|
||||
const message = document.getElementById('message');
|
||||
const privacyPolicy = document.getElementById('privacyPolicy');
|
||||
|
||||
// 重置验证状态
|
||||
[name, email, subject, message, privacyPolicy].forEach(element => {
|
||||
element.classList.remove('is-invalid');
|
||||
});
|
||||
|
||||
// 表单提交处理
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let isValid = true;
|
||||
inputs.forEach(input => {
|
||||
if (!validateField(input)) {
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (isValid) {
|
||||
// 模拟表单提交成功
|
||||
simulateFormSubmission();
|
||||
}
|
||||
});
|
||||
let isValid = true;
|
||||
|
||||
function validateField(field) {
|
||||
let isValid = true;
|
||||
let errorMessage = '';
|
||||
|
||||
if (field.required && !field.value.trim()) {
|
||||
isValid = false;
|
||||
errorMessage = '此字段为必填项';
|
||||
} else if (field.type === 'email' && field.value) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(field.value)) {
|
||||
isValid = false;
|
||||
errorMessage = '请输入有效的邮箱地址';
|
||||
}
|
||||
} else if (field.type === 'tel' && field.value) {
|
||||
const phoneRegex = /^1[3-9]\d{9}$/;
|
||||
if (!phoneRegex.test(field.value)) {
|
||||
isValid = false;
|
||||
errorMessage = '请输入有效的手机号码';
|
||||
}
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
showError(field, errorMessage);
|
||||
} else {
|
||||
clearValidation(field);
|
||||
}
|
||||
|
||||
return isValid;
|
||||
// 验证姓名
|
||||
if (!name.value.trim()) {
|
||||
name.classList.add('is-invalid');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
function showError(field, message) {
|
||||
clearValidation(field);
|
||||
field.classList.add('is-invalid');
|
||||
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'invalid-feedback';
|
||||
errorDiv.textContent = message;
|
||||
field.parentNode.appendChild(errorDiv);
|
||||
// 验证邮箱
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(email.value)) {
|
||||
email.classList.add('is-invalid');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
function clearValidation(field) {
|
||||
field.classList.remove('is-invalid');
|
||||
const errorDiv = field.parentNode.querySelector('.invalid-feedback');
|
||||
if (errorDiv) {
|
||||
errorDiv.remove();
|
||||
}
|
||||
// 验证主题
|
||||
if (!subject.value.trim()) {
|
||||
subject.classList.add('is-invalid');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
function simulateFormSubmission() {
|
||||
// 显示加载状态
|
||||
const submitBtn = contactForm.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 发送中...';
|
||||
|
||||
// 模拟网络请求延迟
|
||||
setTimeout(() => {
|
||||
// 恢复按钮状态
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = originalText;
|
||||
|
||||
// 显示成功消息
|
||||
successAlert.classList.remove('d-none');
|
||||
errorAlert.classList.add('d-none');
|
||||
|
||||
// 重置表单
|
||||
contactForm.reset();
|
||||
|
||||
// 3秒后隐藏成功消息
|
||||
setTimeout(() => {
|
||||
successAlert.classList.add('d-none');
|
||||
}, 3000);
|
||||
}, 2000);
|
||||
// 验证消息内容
|
||||
if (!message.value.trim()) {
|
||||
message.classList.add('is-invalid');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// 验证隐私政策
|
||||
if (!privacyPolicy.checked) {
|
||||
privacyPolicy.classList.add('is-invalid');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// 如果表单有效，显示成功消息
|
||||
if (isValid) {
|
||||
alert('感谢您的消息！我们会尽快回复您。');
|
||||
// 重置表单
|
||||
this.reset();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user