为何这段登录表单代码无法保存用户信息？求技术支援

你的代码目前有几个关键问题导致无法保存用户信息，同时验证逻辑也存在错误，我来逐一解决：

核心问题 #

• 缺少用户数据保存逻辑：原代码仅做页面跳转，完全没有处理用户输入信息的保存操作
• 验证逻辑错误：你获取的是DOM元素对象而非输入框的实际值，且判断条件y == email2 && x == myInput完全不成立（email2和myInput是字符串，而y、x是DOM元素）
• 表单提交行为未处理：Submit按钮不在form标签内，点击会触发默认表单提交，导致页面刷新，打断后续逻辑
• myFunction未定义：显示密码的复选框绑定了该函数，但代码中没有实现

修复后的完整代码 #

HTML部分 #

<form id="signinForm">
  <h1>Email</h1>
  <input type="email" id="email2" required><br><br>
  <h1>Password</h1>
  <input type="password" id="myInput">
  <input type="checkbox" onclick="myFunction()">Show Password<br><br>
  <input type="Submit" value="Sign In">
</form>

JavaScript部分 #

// 显示/隐藏密码功能
function myFunction() {
  const passwordInput = document.getElementById("myInput");
  passwordInput.type = passwordInput.type === "password" ? "text" : "password";
}

// 登录与保存用户信息功能
document.getElementById("signinForm").addEventListener("submit", function(e) {
  // 阻止表单默认提交刷新页面的行为
  e.preventDefault();
  
  // 获取用户输入的实际值
  const email = document.getElementById("email2").value;
  const password = document.getElementById("myInput").value;
  
  // 保存用户信息到本地存储（前端临时保存方式）
  if (email && password) {
    localStorage.setItem("userEmail", email);
    localStorage.setItem("userPassword", password);
    
    // 跳转页面（替换当前窗口，避免新开窗口）
    window.open("account.html", "_self");
  } else {
    // 提示用户输入完整信息
    alert("请填写完整的邮箱和密码！");
    // window.open('sign in.html', "_self");
  }
});

关键改动说明 #

1. 规范表单事件绑定：使用submit事件监听表单提交，而非直接绑定按钮的onclick，更符合表单交互规范
2. 阻止默认刷新行为：通过e.preventDefault()避免页面刷新，确保保存逻辑能执行完成
3. 正确获取输入值：使用.value获取输入框的实际内容，而非直接操作DOM元素对象
4. 本地存储实现保存：使用localStorage将用户信息保存在浏览器本地（如果需要提交到后端，可替换为fetch发送POST请求）
5. 完善显示密码功能：实现了myFunction函数，完成密码输入框的类型切换
6. 优化页面跳转体验：使用_self参数在当前窗口跳转，避免弹出新窗口

注意：localStorage保存的信息是明文的，实际生产环境中密码需要加密后再保存，敏感信息建议通过后端接口存储到数据库中。

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