Validação de Formulários Personalizada com Vue.js

Introdução

Neste projeto, você aprenderá como implementar um validador de formulário personalizado usando Vue.js. O validador de formulário personalizado permite que você valide os campos do formulário e verifique a validade dos dados antes que o usuário envie o formulário.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como implementar o componente FormInput para atualizar o valor v-model do componente quando o valor do campo de entrada muda.
• Como implementar a função is_email para validar o endereço de e-mail com base em regras específicas.
• Como implementar a função validateForm para validar os dados do formulário com base nas regras de validação definidas.

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Criar um validador de formulário personalizado em Vue.js.
• Validar campos de formulário usando regras de validação personalizadas.
• Lidar com erros de validação de formulário e exibi-los ao usuário.

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga as etapas abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura do diretório é a seguinte:

├── components
│   ├── FormInput.js
│   └── FormValidator.js
├── css
├── index.html
├── js
│   └── util.js
└── lib
    └── vue.global.js

Onde:

• index.html é a página principal.
• css é a pasta para armazenar os estilos do projeto.
• lib é a pasta para armazenar as dependências do projeto.
• components/FormInput.js é o componente input.
• components/FormValidator.js é o componente validador de formulário.
• js/util.js é a função utilitária necessária pelo projeto.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Implementar o Componente FormInput

Nesta etapa, você aprenderá como implementar o componente FormInput para atualizar o valor v-model do componente em index.html quando o valor do campo de entrada muda.

1. Abra o arquivo FormInput.js localizado no diretório components.

2. Na função setup do componente FormInput, encontre a seção TODO para o objetivo 1.

3. Implemente o código para acionar um evento para atualizar o valor v-model do componente quando o valor do campo de entrada (com a classe form-input) mudar.

   watch(inputValue, (newValue) => {
     emit("update:modelValue", newValue);
   });
   

   Este código usa a função watch para observar as mudanças na variável reativa inputValue. Quando o valor muda, ele emite um evento com o novo valor para atualizar o binding v-model no componente pai.

4. Salve as alterações no arquivo FormInput.js.

Implementar a Função is_email

Nesta etapa, você aprenderá como implementar a função is_email no arquivo util.js para validar o endereço de e-mail.

1. Abra o arquivo util.js localizado no diretório js.

2. Na função is_email, encontre a seção TODO para o objetivo 2.

3. Implemente a lógica para validar o endereço de e-mail com base nos requisitos fornecidos:

   • O endereço de e-mail deve ter entre 6 e 20 caracteres.
   • O endereço de e-mail deve consistir em uma parte de nome de usuário e uma parte de domínio, separadas pelo símbolo @.
   • A parte do nome de usuário deve ter pelo menos 1 caractere e pode conter dígitos ou letras.
   • A parte do domínio deve conter um . no meio, e a parte antes do . deve ter pelo menos 1 caractere, enquanto a parte após o . deve ter de 2 a 4 letras.

   Aqui está um exemplo de implementação:

   const is_email = (val) => {
     const emailRegex = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/;
     return emailRegex.test(val);
   };
   

4. Salve as alterações no arquivo util.js.

Implementar a Função validateForm

Nesta etapa, você aprenderá como implementar a função validateForm no arquivo FormValidator.js para validar os dados do formulário.

1. Abra o arquivo FormValidator.js localizado no diretório components.

2. Na função validateForm, encontre a seção TODO para o objetivo 3.

3. Implemente a lógica para validar os dados do formulário com base no objeto formRules fornecido. A validação deve seguir estas regras:

   1. Se o campo nickname estiver vazio, adicione uma mensagem de erro ao objeto errors com a chave "nickname".
   2. Para o campo email:
   • Se o campo estiver vazio, adicione uma mensagem de erro ao objeto errors com a chave "email".
   • Se o endereço de e-mail não estiver em conformidade com as regras ou não estiver dentro da faixa de comprimento correta, adicione uma mensagem de erro ao objeto errors com a chave "email".

   Aqui está um exemplo de implementação:

   const validateForm = () => {
     return new Promise((resolve, reject) => {
       errors.value = {}; // Limpar a mensagem de erro anterior
   
       // Validar nickname
       try {
         props.rules.nickname.map((item) => {
           item?.validator(null, props.formData.nickname, (err) => {
             if (err) {
               throw "nickname|" + err.message;
             }
           });
         });
       } catch (e) {
         const parseErr = e.split("|"),
           errKey = parseErr[0],
           errValue = parseErr[1];
         errors.value[errKey] = errValue;
       }
   
       // Validar email
       try {
         props.rules.email.map((item) => {
           if (item?.required) {
             if (props.formData.email == "") throw "email|" + item.message;
           }
           if (item?.type) {
             if (!validateByType(item.type, props.formData.email))
               throw "email|" + item.message;
             if (props.formData.email.length < 6) throw "email|" + item.message;
             if (props.formData.email.length > 20)
               throw "email|" + item.message;
           }
         });
       } catch (e) {
         const parseErr = e.split("|"),
           errKey = parseErr[0],
           errValue = parseErr[1];
         errors.value[errKey] = errValue;
       }
   
       if (hasErrors.value) {
         resolve(false); // Erro existe, validação falhou
       } else {
         resolve(true);
       }
   
       emit("valid", errors.value);
     });
   };
   

4. Salve as alterações no arquivo FormValidator.js.

Parabéns! Você concluiu a implementação do validador de formulário personalizado. Agora você pode testar a aplicação executando o projeto e interagindo com o formulário. O efeito concluído é o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.