js模拟从数据库拿到账号密码进行判断

1.声明账号密码数组, 同时获取账号密码input的dom节点

var user = document.querySelector('.user') // 账号input
var pass = document.querySelector('.pass') // 密码input
var userName = ['小白', '小黑', '小红', '小鹿']
var pwd = ['123', '456', '789', '235']

2.点击登陆按钮用es6的some语法判断数据库(userName)数组中是否包含存在当前value值,声明key作为下标, 用声明obj接收遍历返回值, 判断为true则是存在, false, 则数据库不存在用户输入的账号, 判断userName[key] === user.value && pwd[key] === pass.value说明登陆成功, 否则密码错误

loginBtn.onclick = () => {
             if (user.value && pass.value) {
                // 遍历账号是否存在
                const obj = userName.some((item, index) => {
                    if (item === user.value) {
                        key = index // 赋值下标
                        return true
                    }
                })
                // 如果存在账号
                if (obj) {
                    // 如果账号和密码正确
                    if (user.value === userName[key] && pass.value === pwd[key]) {
                        alert('登陆成功')
                        user.value = ''
                        pass.value = ''
                        ul.classList.add('disBlock')
                        loginBox.classList.remove('disBlock')
                        // 密码错误
                    } else {
                        alert('密码错误')
                        user.value = ''
                        pass.value = ''
                    }
                } else {
                    alert('不存在的账号')
                    user.value = ''
                    pass.value = ''
                }
            } else {
                alert('请补充信息')
            }
        }

3. 效果

注意: 这种方法只是用es6语法some方法, 还有一个更简单的方法则是用数组中的方法indexOf判断是否包含当前用户输入的value进行拿到下标, 不存在则返回-1则是数组中没有包含当前用户输入的value.