基于GoDaddy网站搭建器实现单密码访问隐藏页面的问题

原代码问题梳理 #

你的代码存在几个关键问题，导致无法正常工作：

• HTML密码输入标签未闭合，会引发页面渲染异常
• JS弹窗逻辑和HTML表单完全脱节，没有关联页面上的输入框和按钮
• JS判断存在拼写错误（正确密码写的是mypassword，最后验证却用password），且逻辑运算符&应该用&&
• 表单默认提交行为未阻止，会直接跳转而非执行密码验证逻辑

修正后的完整代码 #

HTML（修正结构，关联验证逻辑） #

<div class="container">
  <form id="passwordForm">
    <input type="password" id="pwd" name="pwd" placeholder="请输入密码"> <br><br>
    <input type="submit" value="提交">
  </form>
  <!-- 用于显示错误提示 -->
  <div id="message"></div>
</div>

CSS（保留样式，优化提示显示） #

input {
  background-color: #000000;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  margin: auto;
  cursor: pointer;
}

input[type=submit] {
  background-color: #000000;
  color: white;
}

#message {
  display: none;
  background: #f1f1f1;
  color: #dc3545;
  position: relative;
  padding: 20px;
  margin-top: 10px;
  text-align: center;
}

#message p {
  padding: 10px 35px;
  font-size: 18px;
  margin: 0;
}

JavaScript（关联表单，修正验证逻辑） #

// 获取页面元素
const passwordForm = document.getElementById('passwordForm');
const pwdInput = document.getElementById('pwd');
const messageBox = document.getElementById('message');

// 自定义配置项，按需修改
const CORRECT_PASSWORD = "mypassword"; // 统一密码
const MAX_ATTEMPTS = 3; // 最大尝试次数
const TARGET_PAGE = "http://www.website.com/webpage.html"; // 隐藏页面地址

let attemptCount = 0;

// 监听表单提交事件
passwordForm.addEventListener('submit', function(e) {
  // 阻止表单默认跳转行为
  e.preventDefault();
  
  const inputPassword = pwdInput.value.trim().toLowerCase();
  pwdInput.value = ''; // 清空输入框
  
  attemptCount++;
  
  if (inputPassword === CORRECT_PASSWORD) {
    // 密码正确，跳转目标页面
    window.location.href = TARGET_PAGE;
  } else {
    if (attemptCount < MAX_ATTEMPTS) {
      showMessage(`密码错误，还有${MAX_ATTEMPTS - attemptCount}次机会`);
    } else {
      showMessage("尝试次数过多，即将返回上一页");
      setTimeout(() => history.go(-1), 2000);
    }
  }
});

// 显示提示信息的辅助函数
function showMessage(text) {
  messageBox.textContent = text;
  messageBox.style.display = 'block';
  
  // 3秒后自动隐藏提示
  setTimeout(() => messageBox.style.display = 'none', 3000);
}

GoDaddy搭建器使用步骤 #

1. 打开GoDaddy网站搭建器，找到需要添加密码验证的页面
2. 添加「自定义HTML」模块（一般在「添加元素」→「高级」分类里）
3. 将上述代码合并成如下格式，粘贴到自定义HTML模块中：

<style>
/* 这里放CSS代码 */
</style>

<div class="container">
  <!-- 这里放HTML结构代码 -->
</div>

<script>
/* 这里放JavaScript代码 */
</script>

4. 修改代码里的CORRECT_PASSWORD和TARGET_PAGE为你的实际内容
5. 保存并发布网站

注意事项 #

• 这种前端验证属于基础防护，懂技术的人能通过源码看到密码。如果需要更高安全性，优先用GoDaddy自带的页面密码保护功能（如果有）
• 确保隐藏页面的URL不会被搜索引擎收录，可通过设置robots.txt禁止抓取

内容的提问来源于stack exchange，提问作者user19764020