如何使用.includes()实现多有效密码的表单验证？

要实现多密码验证，只需要把单个预设密码改成密码数组，结合includes()方法判断输入是否有效，具体修改如下：

修改后的完整代码 #

<div id="passw">
    <div>
        <input type="password" id="password" placeholder="Password + Enter" onkeydown="if (event.keyCode == 13) document.getElementById('button').click()" /> <!-- 按回车即可提交的逻辑保留 -->
    </div>
    <div>
        <input id="button" type="hidden" value="Submit" onclick="
            // 定义所有有效密码的数组，可按需添加更多密码
            const validPasswords = ['password123', 'abc456', 'xyz789'];
            const inputPassword = document.getElementById('password').value;
            
            if (validPasswords.includes(inputPassword)) { 
                document.getElementById('section-hidden').classList.toggle('show');   
                document.getElementById('passw').style.display='none';
            } else {  
                alert('Invalid Password!'); 
                // 选中输入框内所有文本，方便用户重新输入
                document.getElementById('password').setSelectionRange(0, inputPassword.length);   
            } " />
    </div>
</div>

关键修改点 #

• 定义有效密码数组：新增validPasswords数组，把所有允许的密码都放在里面，后续要加新密码直接往数组里追加即可
• 替换验证逻辑：用validPasswords.includes(inputPassword)替代原有的单个密码相等判断，includes()会自动检查输入的密码是否在有效列表中
• 优化选中逻辑：把原来直接用password变量的写法改成document.getElementById('password')，避免依赖全局变量，代码更稳定

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