如何验证指定元素是否存在于JavaScript数组（登录校验场景适用）

问题原因 #

• 你用Array.includes()匹配逻辑错误：logs数组的元素是存储用户名+密码的对象，includes是直接比对值的全等关系，字符串和对象不可能匹配成功
• 原有逻辑只校验了用户名，没有校验对应的密码，不符合登录的校验要求
• 未提前提取输入框的内容值，也没有做多余空格过滤，容易出现误判

修正后代码 #

var logs = [
    {
        username: "admin",
        senha: "admin"
    },
    {
        username: "client",
        senha: "client"
    }
]

function login_func() {
    // 提取输入内容并去除首尾空格
    const inputUsername = document.getElementById('email_val').value.trim()
    const inputPassword = document.getElementById('passwd').value.trim()

    // 遍历账户列表匹配同时符合用户名和密码的账户
    const validAccount = logs.find(account => {
        return account.username === inputUsername && account.senha === inputPassword
    })

    if (validAccount) {
        alert('登录成功')
        // 可在此处添加登录成功后的业务逻辑，比如页面跳转
    } else {
        alert('用户名或密码错误')
    }
}

额外注意 #

• 你需要给登录按钮绑定click事件触发login_func，如果用表单提交的话记得阻止表单的默认跳转行为
• 该实现仅适用于学校练手项目，真实生产环境绝对不能把账户明文存在前端，密码需要加盐哈希后存储在服务端，校验逻辑也要走服务端接口处理

内容的提问来源于stack exchange，提问作者Enzo Enrico