1. アカウントパスワードの配列を宣言し、同時にアカウントパスワード入力の 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)配列に現在値が存在するかどうかを判定し、キーを添え字として宣言し、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 を使用して、現在のユーザーが入力した値が添字を取得するために含まれているかどうかを判断することです。存在しない場合は、-1 を返し、現在のユーザーが入力した値が配列に含まれていないことを示します。