如何通过输入元素（原始js）实时检查用户是否存在于JavaScript对象中

Question

我对 JS 很陌生，我正在尝试实时检查 JavaScript 对象中是否存在用户或任何值，目标是在 Firebase 中实现它以防止用户注册如果该用户名已被占用，但我首先在本地进行，因为我正在学习。这是我到目前为止所拥有的。

let input = document.getElementById('input')
let btn = document.getElementById('btn')
btn.disabled = false

let users = [
    {
        uname: "mark"
    },
    {
        uname: "sarah"
    },
    {
    ...others uname
    }
]

input.addEventListener('input', () => {

    input.value = input.value.replace(regex, "")
    check(input.value)
    
})

function check(val) {

    users.forEach((item) => {
        let uname = item.uname

        if (uname.indexOf(val) > -1 && uname === val) {
            console.log('That user name has been taken')
            btn.disabled = true
        } else {
            console.log('Ok')
            btn.disabled = false
        }
    })
}

问题是，当我输入输入元素时，我同时触发了 if 和 else，而 while (val) 匹配了一些 key/value 对，而其他对则不会，然后我可以使用无论我输入什么用户名，这都不是我想要的。

我该如何解决这个问题？谢谢

Answer 1

您没有检查是否已找到用户名。

function isUsernameAvailable (val) {
    for (var i = 0; i < users.length; i++) {
        var uname = users[i].name;

        if (uname === val) {
            console.log('That user name has been taken')
            btn.disabled = true

            return false; // the username is taken, we can stop checking
        }
    }

    console.log('Ok')
    btn.disabled = false

    return true;
}

此外，forEach 不会让您提前退出循环，并且您不需要在找到匹配项后检查每个用户（如果找到匹配项）。

如何通过输入元素（原始js）实时检查用户是否存在于JavaScript对象中

How to check in real time if a user exists in a JavaScript object through an input element (raw js)

javascript

livesearch

firebase