如何制作单密码验证且密码源码可见的JavaScript登录表单？

没问题，我来帮你搞定这个需求——虽然这种共用密码且明文存前端的方式确实少见，但既然你明确知道风险并需要这么做，直接上可运行的代码和细节解释：

第一步：HTML表单结构 #

先搭建基础的密码输入表单，包含密码框和提交按钮：

<form id="sharedPasswordForm">
  <label for="passwordInput">请输入登录密码：</label>
  <input type="password" id="passwordInput" required>
  <button type="submit">登录</button>
</form>

• type="password"会隐藏用户输入的内容，避免旁人直接看到；
• required属性确保用户不能空提交表单；
• 给表单和输入框加id是为了让JS能快速定位元素。

第二步：JavaScript验证逻辑 #

接下来写验证密码并跳转的JS代码，直接放在HTML的<script>标签里（或者外部JS文件都可以）：

// 获取页面上的表单和密码输入框元素
const loginForm = document.getElementById('sharedPasswordForm');
const passwordInput = document.getElementById('passwordInput');

// 这里替换成你实际要用的共用密码（注意：这个值会在页面源码里暴露）
const SHARED_PASSWORD = 'my-shared-secret';

// 监听表单的提交事件
loginForm.addEventListener('submit', function(event) {
  // 阻止表单默认的提交行为（避免页面刷新）
  event.preventDefault();
  
  // 获取用户输入的密码，去掉首尾空格
  const enteredPassword = passwordInput.value.trim();
  
  // 对比输入密码和预设密码
  if (enteredPassword === SHARED_PASSWORD) {
    // 密码正确，跳转到目标页面（替换成你的目标页面路径）
    window.location.href = '/dashboard.html';
  } else {
    // 密码错误，给用户提示
    alert('密码错误，请重试！');
    // 清空输入框并重新聚焦，方便用户再次输入
    passwordInput.value = '';
    passwordInput.focus();
  }
});

关键细节说明 #

• 我们用event.preventDefault()阻止了表单的默认提交行为，这样页面不会刷新，完全由JS来处理跳转逻辑；
• 对比密码时用了trim()，避免用户不小心输入空格导致验证失败；
• 密码错误时的提示和输入框重置是提升用户体验的小细节。

关于安全的提醒（你已经知道，但还是再强调下） #

这种把密码明文写在前端代码里的方式，任何用户都能通过浏览器的“查看页面源码”功能找到密码，绝对不能用于需要安全性的场景（比如用户账号系统、敏感数据页面）。如果后续需要提升安全性，建议改用后端验证：把密码存在服务器端，表单提交到后端接口验证，验证通过后再跳转，这样密码不会暴露在前端。

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