博客网站注册登录功能异常求助：重复注册无提示、密码验证失效

核心问题梳理 #

你的代码里有几个关键错误导致了重复注册无提示、错误密码仍跳转的问题：

• localStorage遍历逻辑错误：Object.keys.length 获取的是Object.keys方法本身的长度（固定为1），而不是localStorage中存储的键的数量。正确写法是Object.keys(localStorage).length，否则循环范围完全错误，根本找不到已注册用户。
• 状态变量未重置：avail定义在函数外部，每次调用check()时不会重新初始化，第一次判断后的状态会保留，导致后续逻辑判断混乱。
• 表单默认提交未拦截：按钮默认是submit类型，点击后会自动触发表单提交跳转，不管校验逻辑是否通过。
• 方法调用错误：focus是DOM元素的方法，需要加括号调用（.focus()），否则不会让输入框获得焦点。
• 循环未及时终止：找到已存在的用户后没有跳出循环，会继续遍历其他键，可能覆盖之前的判断结果。
• 错误密码未阻止跳转：当用户已存在但密码错误时，没有阻止后续表单跳转逻辑，导致错误密码也能进入主页。

修复后的代码 #

Signup.html

主要修改按钮类型，避免默认提交行为：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href= "blog.css">
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>  
<div class="Title" align="center"> 
       <br>     
       <hr>
       <h1> InFinite Blogging</h1>
       <hr>
       <br>       
   </div> 
    <form id="form" action="signup.html" method="post">
  <div class="signup">
      <input type="text" id="username" placeholder="username">
      <br>
      <input type="password" id="password" placeholder="password" >
      <!-- 修改按钮类型为button，避免默认提交 -->
      <button id="next" type="button" onclick="check()">sign up </button>
 </div> 
   </form>
  <script src="blog.js"></script>
</body>
</html>

Blog.js

修正所有逻辑错误：

// 初始化admin账户可以保留在外部
localStorage.setItem(0, 'admin');
localStorage.setItem('admin', '12345678');

function check() {
    // 把avail移到函数内部，每次调用都重置状态
    var avail = false;
    var user = document.getElementById('username').value;
    var pass = document.getElementById('password').value;
    // 获取localStorage的所有键，再取长度
    var storageKeys = Object.keys(localStorage);
    var max1 = storageKeys.length;
    var max = max1 - 1;

    if( user === "" || user === null || pass === "" || pass === null ) {
        alert("请先输入用户名和密码。");
        document.getElementById('username').focus();
        return;
    } else if(pass.length < 8) {
        alert("密码长度必须至少8位。");
        document.getElementById('password').focus();
        return;  
    } 

    // 遍历已注册的用户名（存在localStorage的数字键中）
    for (var i = 0; i <= max; i++) {
        if (user === localStorage.getItem(i)) {
            alert("你已经有账户啦 😃。");
            avail = true;
            var savedPass = localStorage.getItem(user);

            if (pass !== savedPass) {
                alert("请检查密码是否正确。");
                // 密码错误时直接返回，阻止后续逻辑
                return;
            } else if(pass === savedPass) {
                avail = 'correct';
            }
            // 找到匹配用户后跳出循环，避免无效遍历
            break;
        } 
    }

    if(avail !== true) {
        localStorage.setItem(max1, user);
        localStorage.setItem(user, pass);
        // 跳转到主页
        window.location.href = 'main.html';
    } else if(avail === 'correct') {
        // 密码正确时跳转主页
        window.location.href = 'main.html';
    }
}

额外说明 #

• 直接用window.location.href跳转比修改form的action更直观，也避免了表单提交的潜在问题。
• 建议用===严格相等判断，避免隐式类型转换带来的意外问题。
• 可以考虑给用户名输入框添加唯一性校验的实时提示，提升用户体验。

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