如何在HTML+JS搭建的登录页面中清除旧用户名与密码

你只需要在校验逻辑执行完成后，将用户名、密码输入框的value属性设为空字符串即可。同时注意你当前代码存在一处逻辑漏洞：全局变量login没有在每次触发登录校验时重置，会导致第一次登录成功后，后续所有校验都会被误判为成功，建议同步修复。

具体修改步骤 #

• 进入getUser函数时首先重置login变量为false，避免上次校验结果干扰本次判断
• 校验逻辑执行完成后，统一清空两个输入框的内容

额外提示：你原代码中判断用户账号密码匹配时使用的是位运算符&，建议替换为逻辑与运算符&&，避免出现异常判断结果，下述修改代码中已同步修正该问题。

修改后的完整JS代码 #

const loginSign = document.querySelector('.loginSign')
const passSign = document.querySelector('.passSign')
const signBtn = document.querySelector('.signBtn')

var login = false;
async function getUser() {
    // 每次触发校验先重置登录状态
    login = false
    const data = await getData()

    data.forEach((user,index)=> {
        if(user.login.toLowerCase() === loginSign.value.toLowerCase() && user.pass.toLowerCase() === passSign.value.toLowerCase()) {
            login = true
        }
    });

    if(login) {
        setTimeout(function(){
            successful.classList.add('active')
        },500)
        setTimeout(function(){
            successful.classList.remove('active')
        },3000)
        console.log(login)
    }
    else {
        unsuccessful.classList.add('active')
        setTimeout(function() {
            unsuccessful.classList.remove('active')
        },2000)
        console.log("err :" + login)
    }

    // 校验完成后统一清空输入框内容
    loginSign.value = ''
    passSign.value = ''
}

额外可选优化 #

如果你后续把登录按钮换成form原生的submit触发逻辑，也可以直接调用表单的reset()方法批量清空所有表单内容，写法更简洁：

document.querySelector('.signForm').reset()

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