JavaScript账号注册表单密码匹配错误提示不隐藏问题求解

错误提示不消失的核心原因有两个：

• 校验全部通过进入成功分支时，没有清空之前写入错误提示容器的文本内容，之前的密码不一致提示一直遗留展示
• 原代码中对DOM元素的赋值写法存在隐性问题，会导致后续无法正常操作对应的DOM节点

按以下逻辑调整代码即可解决问题：

1. 每次触发注册点击逻辑时，先清空历史的错误、成功提示内容，避免上一次校验的结果残留
2. 进入成功分支时主动清空错误提示，同时修正DOM操作的错误写法
3. 可简化冗余的校验条件，让逻辑更清晰

let btn=document.getElementById('register-button');
let divsucc=document.getElementById('success-message');
let diverr=document.getElementById('error-message');
let username=document.getElementById('username');
let password=document.getElementById('password');
let confirmpassword=document.getElementById('confirm-password');
let usernamediv=document.getElementById('username-div');
let passworddiv=document.getElementById('password-div');
let confirmpassworddiv=document.getElementById('confirm-password-div');
let btndiv=document.getElementById('register-button-div')

btn.onclick=function(){
    // 先清空上一次的提示内容，避免残留
    diverr.innerHTML = '';
    divsucc.innerHTML = '';

    if(username.value.trim().length === 0){
        diverr.innerHTML="请输入用户名";
    }
    else if(password.value.trim().length === 0){
        diverr.innerHTML="请输入密码";
    }
    else if(confirmpassword.value.trim().length === 0){
        diverr.innerHTML="请确认密码";
    }
    else if(password.value !== confirmpassword.value){
        diverr.innerHTML="两次输入的密码必须一致";
    }
    else if(password.value.length < 8){
        diverr.innerHTML="密码长度不能少于8位";
    }
    else{
        // 所有校验通过，隐藏注册相关元素，展示成功提示
        usernamediv.style.visibility='hidden';
        passworddiv.style.visibility='hidden';
        confirmpassworddiv.style.visibility='hidden';
        btndiv.style.visibility='hidden';
        divsucc.innerHTML="账号创建成功！";
    }
}

你可以给错误提示添加红色字体样式、成功提示添加绿色字体样式，用户体验会更好。也可以在密码、确认密码输入框的input事件里添加实时校验逻辑，不用等点击注册按钮才提示错误。

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