Nos testes de Erro no CEP percebi que quando você coloca um CEP certo e em seguida coloca outro inválido, os campos continuam com os dados antigos.
Por isso, melhorando a experiência do usuário, fiz com que os campos fossem limpos a cada situação de erro.
Lá no final do código, fiz uma função "limparCampos", e este é acionado sempre que é feito o "confere" do CEP antes do preenchimento.
Limpar campos
var cep = document.getElementById('cep');
cep.addEventListener("focusout", () => limparCampos()); //Limpa os campos
cep.addEventListener("focusout", () => buscaEndereco(cep.value));
function limparCampos() {
cidade.value = "";
logradouro.value = "";
estado.value = "";
bairro.value = "";
}
Casos específicos de erro: Agora responde com a quandidade de caracteres e se estão colocando letras no lugar de números.
catch (erro) {
if (cep.length < 8 || cep.length > 9){ //Se tiver números a mais ou faltando
mensagemErro.innerHTML = `<p>Está faltando número ou possui números demais</p>`;
console.log(erro);
} else
if (cep = /^[a-z]/){
mensagemErro.innerHTML = `<p>Tem letra nesse CEP, corrija por favor.`;
console.log(erro);
} else
if (cep != /^[0-9]{5}?-[0-9]{3}$/){ //qualquer coisa diferente dos números
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);
}
else{ // O normal do CEP não encontrado.
mensagemErro.innerHTML = `<p>CEP inválido. Tente novamente!</p>`;
console.log(erro);
}
}