从HtmlInputElement获取值并校验用户密码的代码故障排查

核心问题分析 #

• 变量名大小写不匹配：校验逻辑里写了arrayItem.password，但循环中定义的变量是ArrayItem（首字母大写），这会导致arrayItem未定义，直接阻断校验流程。
• 未正确提取输入值：原代码直接用DOM元素对象和字符串比较，必须获取输入框的value属性才能拿到用户实际输入的内容。
• 循环逻辑冗余：原生数组方法find比手动for循环更简洁，能直接定位匹配的用户。

修正后的完整代码 #

TypeScript版本

// 用户数据
const Users = [{ userName: 'Hasan1934', password: 'Qwx32dksa' }];

// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
    // 获取输入框并提取值（类型断言确保是输入元素）
    const userNameInput = document.getElementById("username-field") as HTMLInputElement;
    const passwordInput = document.getElementById("password-field") as HTMLInputElement;

    const inputUserName = userNameInput.value.trim(); // 去除首尾空格避免误判
    const inputPassword = passwordInput.value.trim();

    // 匹配用户
    const matchedUser = Users.find(user => 
        user.userName === inputUserName && user.password === inputPassword
    );

    if (matchedUser) {
        console.log("登录成功！");
        // 这里添加登录成功后的业务逻辑，比如页面跳转
    } else {
        console.log("用户名或密码错误");
    }
});

JavaScript版本（无类型断言）

// 用户数据
const Users = [{ userName: 'Hasan1934', password: 'Qwx32dksa' }];

// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
    // 获取输入框，先判断元素是否存在
    const userNameInput = document.getElementById("username-field");
    const passwordInput = document.getElementById("password-field");

    if (!userNameInput || !passwordInput) {
        console.error("页面缺少必要的输入框");
        return;
    }

    const inputUserName = userNameInput.value.trim();
    const inputPassword = passwordInput.value.trim();

    // 匹配用户
    const matchedUser = Users.find(user => 
        user.userName === inputUserName && user.password === inputPassword
    );

    if (matchedUser) {
        console.log("登录成功！");
    } else {
        console.log("用户名或密码错误");
    }
});

额外注意事项 #

• 加上trim()可以过滤用户输入的首尾空格，避免因误输入空格导致校验失败。
• 必须等待DOM加载完成后再获取元素，否则getElementById会返回null，导致后续代码报错。

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