[Projeto] Epecificar mensagens de erro

Oi gente! Testei especificar as mensagens de erro para o usuário como sugerido pela professora Môni.

Usei o innerHTML para exibir o erro de CEP inexistente (erro = true), ao invés de passar o throw Error().

        if (consultaCEPConvertida.erro) {
            mensagemErro.innerHTML = `<p>Este CEP não existe. Tente novamente.</p>`
        } else {
            var logradouro = document.getElementById("endereco");
            var bairro = document.getElementById("bairro");
            var cidade = document.getElementById("cidade");
            var estado = document.getElementById("estado");

            logradouro.value = consultaCEPConvertida.logradouro;
            bairro.value = consultaCEPConvertida.bairro;
            cidade.value = consultaCEPConvertida.localidade;
            estado.value = consultaCEPConvertida.uf;

            console.log(consultaCEPConvertida);
            return consultaCEPConvertida;
        }

Para o CEP de formato inválido usei uma RegEx e o operador inequality.

    } catch(erro) {
        if(cep != /^[0-9]{5}?-[0-9]{3}$/){
            mensagemErro.innerHTML = `<p>Formato inválido. Um CEP válido contém 8 números, sem espaço e letras. Insira o CEP novamente.</p>`
            console.log(erro)
        }
    }

E estilizei o próprio id erro no CSS.

#erro {
    color: var(--vermelho);
    font-size: .8rem;
    line-height: 1rem;
    margin-top: .5rem; 
}

Como não tenho experiência na área, compartilhando aqui para ver se tem alguma correção ou se alguém tem alguma sugestão melhor. Vlw!