nessa aula agora vou te mostrar como digitar um CEP fazer uma requisição lá para o Via CEP pegar os dados de retorno e preencher os campos do formulário de acordo com o retorno Olha só se eu digitar aqui o CEP digita que o CEP Dom Focus out eu quero que automaticamente o endereço o bairro e a cidade ele já sejam preenchidos Então na hora que eu digitar que o CEP e deram focos out eu quero que cada um desses Campos eles sejam preenchidos de acordo com o Retorno lá do Via CEP então eu vou utilizar um viasep onde eu vou fazer uma requisição aqui para esse endereço onde essa partezinha aqui é o CEP que eu vou digitar então vou fazer na aquisição para esse endereço aqui e ele vai retornar para mim tudo isso aqui olha só que legal então antes de começar por favor deixe o seu like e se inscreva aqui no canal que você vai me ajudar imensamente vamos lá eu já deixei pronto aqui algumas coisinhas eu deixei pronto aqui o index. l Winx GTS também está aí o ponto CSS onde no index. html eu coloquei aqui em cima chamada para o Bootstrap e também a chamada para a minha estilização a minha utilização esse aqui ó eu tô importando aqui uma fonte do Google Fontes tô colocando a fonte aqui para todos os elementos dentro do Body estou estilizando Box que é esse Box aqui que tá dentro do container esse container aqui ele é do Bootstrap Então estou estilizando Box que é justamente esse Box Amarelo aqui ó Amarelo ou verde claro sei lá e aqui e aqui estou estilizando cada um desses implantes aqui ó cada um desses importantes eu estou estilizando aqui ó porque em cada um dos implantes eu coloquei uma classe em Punch Então dentro do box Olha só dentro do box tem o impuch onde estou colocando 10 beleza é somente isso que eu deixei Pronto agora vamos para o código que é o que interessa é claro Primeira coisa eu tenho que pegar o CEP e para pegar o CEP eu venho aqui coloco um poste CEP igual documentos selector e vou colocar aqui o CEP Beleza agora eu preciso pegar também o bairro precisa pegar a cidade e preciso pegar o endereço Então faço mais três cópias aqui vai ser o Edwards o advers vai ser claro o endereço eu vou colocar aqui o bairro aqui vai ser o bairro e aqui vai ser a cidade a minha City minha cidade agora Como que eu faço para escutar o evento de focos out porque olha só veja que aqui aqui ó tá um Contorno azul quer dizer que o foco Ele está aqui na hora que eu tiro o foco daqui eu quero que dispare um evento Então venho aqui coloco o CEP CEP ponto add é ventilaser vai ser Focus Alt Focus Alt Deixa eu só passar aqui uma Aero Phantom e só vou colocar por enquanto um console.
blog vai ser Focus out clico aqui console todo foco aqui para tirar o foco roupa tá aqui ó beleza agora você não concorda comigo que não é tudo que eu quero fazer uma pesquisa lá no Via CEP por exemplo se eu digitar aqui letras junto com números não tem nada a ver E se eu digitar no CEP que não bate com o número de caracteres de um CEP se eu não me engano são oito dígitos né então vou ter que fazer duas válidações Olha só eu venho aqui no regexr. com e vou colocar aqui vai ser 14 811 260 que é o meu CEP então eu tentei Certeza absoluta que o que eu digitei aqui é somente números então venho aqui coloco olha só acento circunflexo e fecha aqui com o cifrão e no meio eu coloco zero até nove e coloco mais aqui então quer dizer que eu quero do começo até o fim eu quero somente somente números Se eu colocar aqui olha só caracteres colocar letras não vai funcionar então é somente números não interessa aqui quantos números coloque mas só que agora olha só se eu colocar desse jeito abre e fecha Chaves e coloca oito quer dizer que eu quero somente oito caracteres Então vem aqui tira isso aqui olha só se eu coloco mais ele não pega então tem dar um jeito de fazer essas duas expressões regulares eu venho aqui coloco o nome que eu coloquei aqui no meu projeto pronto vai ser vai ser igual eu vou pegar aqui expressão regular vai ser vou começar e terminar somente números vai ser de 0 até 9 e colocar o maisinho aqui e agora eu quero verificar se o CEP ele é válido vamos pegar até oito caracteres aqui CEP velland daí eu venho aqui embaixo coloco if que only numbers Ou melhor o primeiro vou verificar se o CEP é válido não vai ser somente Não mesmo vai ser teste teste Depois você procura a respeito desse teste aqui é bem legal ele testa a expressão regular e vou colocar aqui o CEP very 7. 0 e vou colocar ou até aqui é o sinal de negação se não for somente números ou se não for no CEP velha vai ser teste eu vou passar o CEP só que agora aqui eu preciso dar um jeito de lançar uma exceção e para lançar exceção eu vou colocar troll olha só que legal eu vou colocar aqui um objeto vai ser não vai ser CEP erro e aqui vai ser CEP em Valente ou alguma coisa que você queira colocar eu vou colocar aqui CEP inverter e eu vou colocar tudo isso aqui dentro de um bloco try Cat só pegar isso aqui tudo isso aqui e coloca aqui dentro do try beleza e agora aqui no CAT Eu só vou colocar por enquanto um console ponto log aqui no erro Por enquanto vai ser um console.
log erro agora vamos ver vem aqui digita letras Don tebe Olha só Object CEP erro beleza já lancei aqui a exceção e agora vou colocar if you ponto erro CEP Então se tem a propriedade de erro e olha só aqui eu tenho um spam com ID Messenger onde eu coloquei em cima do forme por quê Porque eu quero que apareça uma mensagem para usuário falando que esse CEP ele é inválido então agora vem aqui em cima faça uma cópia disso aqui Messenger aqui vai ser Messenger vem aqui coloco vai ser Messenger só que eu quero que depois de 5 segundos eu quero que a mensagem ela suma então começa a gente ponto pega esse context como que a gente vai ser a vazio depois cinco segundos a mensagem vai ficar vazio Então vem aqui digita qualquer coisa não bebe não tá funcionando porque aqui pera aí tá certo Messenger tá pegando aqui o Messenger perfeito é isso mesmo é receptor perdão é CEP erro CEP erro e cep erro Agora sim Digita aqui somente letras Olha só CEP inverte E se eu digitar somente números mas só que se eu colocar mais de 8 números ou menos de 8 números Olha só seta invera de Beleza então a validação tá funcionando certinho agora vem a requisição lá para o Via CEP eu vou trabalhar aqui com a Sync vai ser constr response eu vou pegar aqui o endereço que é justamente esse aqui não controlo c o endereço coloco aqui e aqui isso aqui tem que ser dentro de uma template string porque eu vou colocar aqui ó vou colocar aqui vai ser o cep.
