|
@@ -0,0 +1,525 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="zh-CN">
|
|
|
|
|
+
|
|
|
|
|
+<head>
|
|
|
|
|
+ <meta charset="UTF-8">
|
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
+ <title>身份证验证</title>
|
|
|
|
|
+ <style>
|
|
|
|
|
+ * {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ body {
|
|
|
|
|
+ font-family: 'Microsoft YaHei', Arial, sans-serif;
|
|
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 15px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .container {
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ border-radius: 15px;
|
|
|
|
|
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
|
|
|
|
|
+ padding: 25px 30px;
|
|
|
|
|
+ max-width: 1400px;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ max-height: 90vh;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ h1 {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+ font-size: 24px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .message-area {
|
|
|
|
|
+ min-height: 45px;
|
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .error-message,
|
|
|
|
|
+ .success-message {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ padding: 10px 15px;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .error-message {
|
|
|
|
|
+ background: #fee;
|
|
|
|
|
+ color: #c33;
|
|
|
|
|
+ border-left: 3px solid #c33;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .success-message {
|
|
|
|
|
+ background: #efe;
|
|
|
|
|
+ color: #3c3;
|
|
|
|
|
+ border-left: 3px solid #3c3;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .error-message.show,
|
|
|
|
|
+ .success-message.show {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .upload-section {
|
|
|
|
|
+ background: #f8f9fa;
|
|
|
|
|
+ border: 2px dashed #667eea;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ padding: 30px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ transition: all 0.3s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .upload-section:hover {
|
|
|
|
|
+ border-color: #764ba2;
|
|
|
|
|
+ background: #f0f0f5;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .upload-section.dragover {
|
|
|
|
|
+ border-color: #764ba2;
|
|
|
|
|
+ background: #e8e8f5;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .upload-label {
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .upload-icon {
|
|
|
|
|
+ font-size: 40px;
|
|
|
|
|
+ color: #667eea;
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .upload-text {
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ margin-bottom: 5px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .upload-hint {
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ #id_card_image {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-upload {
|
|
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ padding: 10px 35px;
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ margin-top: 12px;
|
|
|
|
|
+ transition: transform 0.2s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-upload:hover {
|
|
|
|
|
+ transform: translateY(-2px);
|
|
|
|
|
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-upload:disabled {
|
|
|
|
|
+ background: #ccc;
|
|
|
|
|
+ cursor: not-allowed;
|
|
|
|
|
+ transform: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .main-content {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .main-content.show {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
|
|
+ gap: 25px;
|
|
|
|
|
+ align-items: start;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .left-panel {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ gap: 15px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .image-preview {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ background: #f8f9fa;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ padding: 15px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .image-preview img {
|
|
|
|
|
+ max-width: 100%;
|
|
|
|
|
+ max-height: 450px;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .loading {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ padding: 30px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .loading.show {
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .spinner {
|
|
|
|
|
+ border: 3px solid #f3f3f3;
|
|
|
|
|
+ border-top: 3px solid #667eea;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ width: 35px;
|
|
|
|
|
+ height: 35px;
|
|
|
|
|
+ animation: spin 1s linear infinite;
|
|
|
|
|
+ margin: 0 auto 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @keyframes spin {
|
|
|
|
|
+ 0% {
|
|
|
|
|
+ transform: rotate(0deg);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ 100% {
|
|
|
|
|
+ transform: rotate(360deg);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .right-panel {
|
|
|
|
|
+ background: #f8f9fa;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ max-height: 520px;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .result-title {
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .result-grid {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .result-item {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 90px 1fr;
|
|
|
|
|
+ padding: 12px 15px;
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .result-label {
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #667eea;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .result-value {
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ word-break: break-all;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .result-value.empty {
|
|
|
|
|
+ color: #999;
|
|
|
|
|
+ font-style: italic;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .button-group {
|
|
|
|
|
+ margin-top: 15px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-reset {
|
|
|
|
|
+ background: #6c757d;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ padding: 8px 25px;
|
|
|
|
|
+ border-radius: 20px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ transition: all 0.2s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-reset:hover {
|
|
|
|
|
+ background: #5a6268;
|
|
|
|
|
+ transform: translateY(-2px);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @media (max-width: 1200px) {
|
|
|
|
|
+ .main-content.show {
|
|
|
|
|
+ grid-template-columns: 1fr;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .image-preview img {
|
|
|
|
|
+ max-height: 350px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 滚动条样式 */
|
|
|
|
|
+ .right-panel::-webkit-scrollbar {
|
|
|
|
|
+ width: 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .right-panel::-webkit-scrollbar-track {
|
|
|
|
|
+ background: #f1f1f1;
|
|
|
|
|
+ border-radius: 3px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .right-panel::-webkit-scrollbar-thumb {
|
|
|
|
|
+ background: #667eea;
|
|
|
|
|
+ border-radius: 3px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .right-panel::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
+ background: #5568d3;
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
|
|
|
|
+</head>
|
|
|
|
|
+
|
|
|
|
|
+<body>
|
|
|
|
|
+ <div class="container">
|
|
|
|
|
+ <h1>🪪 身份证信息验证</h1>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="message-area">
|
|
|
|
|
+ <div class="error-message" id="errorMessage"></div>
|
|
|
|
|
+ <div class="success-message" id="successMessage"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="upload-section" id="uploadSection">
|
|
|
|
|
+ <label for="id_card_image" class="upload-label">
|
|
|
|
|
+ <div class="upload-icon">📤</div>
|
|
|
|
|
+ <div class="upload-text">点击或拖拽上传身份证图片</div>
|
|
|
|
|
+ <div class="upload-hint">支持 JPG、PNG 格式,建议文件小于 5MB</div>
|
|
|
|
|
+ </label>
|
|
|
|
|
+ <input type="file" id="id_card_image" accept="image/*">
|
|
|
|
|
+ <br>
|
|
|
|
|
+ <button class="btn-upload" id="btnUpload" disabled>开始识别</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="loading" id="loading">
|
|
|
|
|
+ <div class="spinner"></div>
|
|
|
|
|
+ <div>正在识别中,请稍候...</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="main-content" id="mainContent">
|
|
|
|
|
+ <div class="left-panel">
|
|
|
|
|
+ <div class="image-preview">
|
|
|
|
|
+ <img id="imagePreview" src="" alt="身份证预览">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="right-panel">
|
|
|
|
|
+ <div class="result-title">识别结果</div>
|
|
|
|
|
+ <div class="result-grid">
|
|
|
|
|
+ <div class="result-item">
|
|
|
|
|
+ <div class="result-label">姓名</div>
|
|
|
|
|
+ <div class="result-value" id="resultName">-</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="result-item">
|
|
|
|
|
+ <div class="result-label">性别</div>
|
|
|
|
|
+ <div class="result-value" id="resultGender">-</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="result-item">
|
|
|
|
|
+ <div class="result-label">民族</div>
|
|
|
|
|
+ <div class="result-value" id="resultNation">-</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="result-item">
|
|
|
|
|
+ <div class="result-label">出生日期</div>
|
|
|
|
|
+ <div class="result-value" id="resultBirth">-</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="result-item">
|
|
|
|
|
+ <div class="result-label">地址</div>
|
|
|
|
|
+ <div class="result-value" id="resultAddress">-</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="result-item">
|
|
|
|
|
+ <div class="result-label">身份证号</div>
|
|
|
|
|
+ <div class="result-value" id="resultIdNumber">-</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="button-group">
|
|
|
|
|
+ <button class="btn-reset" id="btnReset">重新识别</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <script>
|
|
|
|
|
+ const fileInput = document.getElementById('id_card_image');
|
|
|
|
|
+ const btnUpload = document.getElementById('btnUpload');
|
|
|
|
|
+ const btnReset = document.getElementById('btnReset');
|
|
|
|
|
+ const uploadSection = document.getElementById('uploadSection');
|
|
|
|
|
+ const mainContent = document.getElementById('mainContent');
|
|
|
|
|
+ const imagePreview = document.getElementById('imagePreview');
|
|
|
|
|
+ const loading = document.getElementById('loading');
|
|
|
|
|
+ const errorMessage = document.getElementById('errorMessage');
|
|
|
|
|
+ const successMessage = document.getElementById('successMessage');
|
|
|
|
|
+
|
|
|
|
|
+ let selectedFile = null;
|
|
|
|
|
+
|
|
|
|
|
+ // 文件选择事件
|
|
|
|
|
+ fileInput.addEventListener('change', function (e) {
|
|
|
|
|
+ const file = e.target.files[0];
|
|
|
|
|
+ if (file) {
|
|
|
|
|
+ handleFile(file);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 拖拽上传
|
|
|
|
|
+ uploadSection.addEventListener('dragover', function (e) {
|
|
|
|
|
+ e.preventDefault();
|
|
|
|
|
+ uploadSection.classList.add('dragover');
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ uploadSection.addEventListener('dragleave', function (e) {
|
|
|
|
|
+ e.preventDefault();
|
|
|
|
|
+ uploadSection.classList.remove('dragover');
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ uploadSection.addEventListener('drop', function (e) {
|
|
|
|
|
+ e.preventDefault();
|
|
|
|
|
+ uploadSection.classList.remove('dragover');
|
|
|
|
|
+ const file = e.dataTransfer.files[0];
|
|
|
|
|
+ if (file && file.type.startsWith('image/')) {
|
|
|
|
|
+ fileInput.files = e.dataTransfer.files;
|
|
|
|
|
+ handleFile(file);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ showError('请上传图片文件');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 处理文件
|
|
|
|
|
+ function handleFile(file) {
|
|
|
|
|
+ if (file.size > 5 * 1024 * 1024) {
|
|
|
|
|
+ showError('文件大小不能超过 5MB');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ selectedFile = file;
|
|
|
|
|
+ btnUpload.disabled = false;
|
|
|
|
|
+
|
|
|
|
|
+ // 显示图片预览
|
|
|
|
|
+ const reader = new FileReader();
|
|
|
|
|
+ reader.onload = function (e) {
|
|
|
|
|
+ imagePreview.src = e.target.result;
|
|
|
|
|
+ };
|
|
|
|
|
+ reader.readAsDataURL(file);
|
|
|
|
|
+
|
|
|
|
|
+ hideMessages();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 上传并识别
|
|
|
|
|
+ btnUpload.addEventListener('click', async function () {
|
|
|
|
|
+ if (!selectedFile) {
|
|
|
|
|
+ showError('请先选择图片');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const formData = new FormData();
|
|
|
|
|
+ formData.append('id_card_image', selectedFile);
|
|
|
|
|
+
|
|
|
|
|
+ uploadSection.style.display = 'none';
|
|
|
|
|
+ loading.classList.add('show');
|
|
|
|
|
+ hideMessages();
|
|
|
|
|
+
|
|
|
|
|
+ try {
|
|
|
|
|
+ const response = await fetch('/api/verify_id_card', {
|
|
|
|
|
+ method: 'POST',
|
|
|
|
|
+ body: formData
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const data = await response.json();
|
|
|
|
|
+
|
|
|
|
|
+ if (response.ok) {
|
|
|
|
|
+ displayResult(data);
|
|
|
|
|
+ showSuccess('识别成功!');
|
|
|
|
|
+ } else {
|
|
|
|
|
+ showError(data.error || '识别失败,请重试');
|
|
|
|
|
+ uploadSection.style.display = 'block';
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ showError('网络错误,请重试');
|
|
|
|
|
+ uploadSection.style.display = 'block';
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ loading.classList.remove('show');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 显示识别结果
|
|
|
|
|
+ function displayResult(data) {
|
|
|
|
|
+ document.getElementById('resultName').textContent = data.name || '未识别';
|
|
|
|
|
+ document.getElementById('resultGender').textContent = data.gender || '未识别';
|
|
|
|
|
+ document.getElementById('resultNation').textContent = data.nation || '未识别';
|
|
|
|
|
+ document.getElementById('resultBirth').textContent = data.birth || '未识别';
|
|
|
|
|
+ document.getElementById('resultAddress').textContent = data.address || '未识别';
|
|
|
|
|
+ document.getElementById('resultIdNumber').textContent = data.id_number || '未识别';
|
|
|
|
|
+
|
|
|
|
|
+ // 标记未识别的字段
|
|
|
|
|
+ document.querySelectorAll('.result-value').forEach(el => {
|
|
|
|
|
+ if (el.textContent === '未识别') {
|
|
|
|
|
+ el.classList.add('empty');
|
|
|
|
|
+ } else {
|
|
|
|
|
+ el.classList.remove('empty');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ mainContent.classList.add('show');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 重置
|
|
|
|
|
+ btnReset.addEventListener('click', function () {
|
|
|
|
|
+ selectedFile = null;
|
|
|
|
|
+ fileInput.value = '';
|
|
|
|
|
+ imagePreview.src = '';
|
|
|
|
|
+ mainContent.classList.remove('show');
|
|
|
|
|
+ uploadSection.style.display = 'block';
|
|
|
|
|
+ btnUpload.disabled = true;
|
|
|
|
|
+ hideMessages();
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 显示错误信息
|
|
|
|
|
+ function showError(message) {
|
|
|
|
|
+ errorMessage.textContent = message;
|
|
|
|
|
+ errorMessage.classList.add('show');
|
|
|
|
|
+ successMessage.classList.remove('show');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 显示成功信息
|
|
|
|
|
+ function showSuccess(message) {
|
|
|
|
|
+ successMessage.textContent = message;
|
|
|
|
|
+ successMessage.classList.add('show');
|
|
|
|
|
+ errorMessage.classList.remove('show');
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 隐藏所有消息
|
|
|
|
|
+ function hideMessages() {
|
|
|
|
|
+ errorMessage.classList.remove('show');
|
|
|
|
|
+ successMessage.classList.remove('show');
|
|
|
|
|
+ }
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+
|
|
|
|
|
+</html>
|