Página de cadastro completa do Monibank.
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | Monibank |
| 🏷️ Tecnologias | Javascript |
| 🚀 URL | https://monibank-topaz.vercel.app/index.html |
| 🔥 Desafio | https://cursos.alura.com.br/course/javascript-validando-formularios |
Formulário com validação de dados:
Captura de imagem:
Projeto para o cadastro de um usuário no Monibank.
Iniciamos com alguns conceitos básicos de html limitando a quantidade de caracteres em um elemento input e transformar um campo em obrigatório.
Já iniciando no javascript começamos utilizando patterns e regex para selecionar elementos do html, construindo funções para cada elemento e detectando eventos do usuário.
Com isso importamos funções entre arquivos e veridicamos se o CPF com números repetidos.
Na parte de validações, validamos os dígitos verificadores do CPF, utilizando fórmulas matemáticas no código e também verificamos se o usuário é maior de 18 anos.
Para a verificação de possíveis erros nós encontramos as validações padrões que existem no JavaScript com o Validity State, interpretamos cada tipo de erro, fizmos uma mensagem customizada para cada um, tirando o comportamento padrão do html e inserindo essas mensagens.
Com os dados validados nós salvamos eles no localStorage para serem utilizados posteriormente.
Para a captura da foto para o cadastro nós iniciamos a câmera no navegador, capturamos a foto com um evento de click, aplicamos um fluxo de navegação escondendo e mostrando elementos e atualizamos o localStorage para conter a foto enviada pelo usuário.