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.