求助：实现根据输入密码跳转至对应命名页面的功能

嗨，别担心，你的请求一点都不荒谬！我来帮你调整代码，实现多密码对应不同页面跳转的功能，同时也会聊聊你提到的密码可见问题~

修改后的完整代码 #

<div align="left">
  <form id="passwordForm">
    <div class="group">
      <input type="password" name="password" id="accesspasswd" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <img src="images/padlock.png" width="100" onclick="onSubmit()">
    </div>
  </form>
</div>

<script>
// 用对象统一存储密码与对应跳转页面，后续新增规则只需在这里加键值对
const passwordRoutes = {
  '123': 'welcome123.html',
  '456': 'welcome456.html',
  '789': 'welcome789.html'
};

function onSubmit(e) {
  // 阻止表单默认提交行为，避免不必要的页面刷新
  if (e) e.preventDefault();
  
  const inputPassword = document.getElementById('accesspasswd').value;
  // 匹配密码与对应页面，存在则跳转，否则返回原页面
  if (passwordRoutes[inputPassword]) {
    window.location.href = passwordRoutes[inputPassword];
  } else {
    window.location.href = 'welcome.html';
  }
}

// 监听表单提交事件，兼容用户按回车键提交的场景
document.getElementById('passwordForm').addEventListener('submit', onSubmit);
</script>

关键改动说明 #

• 多密码规则易维护：用passwordRoutes对象管理所有密码与页面的对应关系，以后要加新的密码（比如000对应welcome000.html），只需要在对象里追加一行'000': 'welcome000.html'即可，不用写一堆if-else。
• 兼容多种提交方式：既保留了你原来的锁头按钮点击触发，又新增了表单提交事件监听，用户按回车键也能正常触发跳转逻辑。
• 避免页面意外刷新：添加了阻止表单默认提交的逻辑，不会出现跳转前页面闪一下的情况。

关于密码在源码可见的提醒 #

这里要特别说明：这种前端验证的方式只适合非敏感场景，因为任何人都能通过查看页面源码看到所有密码和对应页面。如果你的页面涉及保密内容，一定要改用后端验证——把密码存在服务器端，前端提交后由后端判断是否允许跳转，这样才能保证安全性。

内容来源于stack exchange