Validador de Formulários

Pacote modular em JavaScript para validação de campos de formulários (e-mail, CPF, CNPJ, telefone, CEP e senha forte) com suporte a mensagens customizadas.

Como usar (Node.js)

const { validar } = require('@venowin/meu-primeiro-pacote');

// Validando com mensagem padrão const resultadoEmail = validar('email', '[email protected]'); console.log(resultadoEmail); // { valido: true, mensagem: null }

// Validando com mensagem personalizada const resultadoCpf = validar('cpf', '000.000.000-00', { cpf: 'Por favor, insira um CPF real.' }); console.log(resultadoCpf); // { valido: false, mensagem: 'Por favor, insira um CPF real.' }

Exemplo de Uso em um Formulário HTML

.container {
  border: 4px solid #000;
  border-radius: 40px;
  padding: 40px 50px;
  background-color: #fff;
  width: 450px;
  box-sizing: border-box;
}

h2 {
  text-align: center;
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 30px;
  color: #000;
}

.campo {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
  color: #000;
}

input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #777;
  border-radius: 4px;
  box-sizing: border-box;
  outline: none;
}

input:focus {
  border-color: #007BFF;
}

.erro {
  color: red;
  font-size: 13px;
  display: block;
  margin-top: 5px;
}

button {
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  width: 100%;
}

button:hover {
  background-color: #0056b3;
}

<form id="meu-formulario">
  <!-- E-mail -->
  <div class="campo">
    <label for="email">E-mail:</label>
    <input type="text" id="email" placeholder="[email protected]">
    <span id="erro-email" class="erro"></span>
  </div>

  <!-- CPF -->
  <div class="campo">
    <label for="cpf">CPF:</label>
    <input type="text" id="cpf" maxlength="14" placeholder="000.000.000-00">
    <span id="erro-cpf" class="erro"></span>
  </div>

  <!-- CNPJ -->
  <div class="campo">
    <label for="cnpj">CNPJ:</label>
    <input type="text" id="cnpj" maxlength="18" placeholder="00.000.000/0001-00">
    <span id="erro-cnpj" class="erro"></span>
  </div>

  <!-- Telefone -->
  <div class="campo">
    <label for="telefone">Telefone:</label>
    <input type="text" id="telefone" maxlength="15" placeholder="(11) 98888-8888">
    <span id="erro-telefone" class="erro"></span>
  </div>

  <!-- CEP -->
  <div class="campo">
    <label for="cep">CEP:</label>
    <input type="text" id="cep" maxlength="9" placeholder="00000-000">
    <span id="erro-cep" class="erro"></span>
  </div>

  <!-- Senha Forte -->
  <div class="campo">
    <label for="senha">Senha Forte:</label>
    <input type="password" id="senha" placeholder="Mínimo 8 caracteres, maiúscula, número e símbolo">
    <span id="erro-senha" class="erro"></span>
  </div>

  <button type="submit">Validar Tudo</button>
</form>

Funcionalidades

Funcionalidades Validação de E-mail (Regex)

Validação de CPF e CNPJ (Dígitos verificadores)

Validação de Telefone e CEP

Validação de Senha Forte (Maiúsculas, minúsculas, números e símbolos)

Utilização e Personalização de Mensagens de Erro

Para utilizar e personalizar as mensagens de validação do pacote em seu projeto, siga as orientações detalhadas abaixo.

1. Configuração do Pacote e Dependências Certifique-se de que o Vite está instalado como dependência de desenvolvimento e configurado corretamente no arquivo package.json: No Terminal utilize o comando npm install --save-dev vite e no package.json criado adicione o script "dev": "vite" caso não tenha sido adicionado.

"scripts": { "dev": "vite" },

No terminal, certifique-se de estar na raiz do diretório do projeto e execute o comando abaixo para instalar as dependências necessárias:

npm install

2. Personalização das Mensagens Para alterar os textos exibidos nas validações, ajuste o objeto mensagensPadrao diretamente em seu arquivo de script (index.js ou equivalente):

const mensagensPadrao = { email: "E-mail inválido.", cpf: "CPF inválido.", cnpj: "CNPJ inválido.", telefone: "Telefone inválido.", cep: "CEP inválido.", senha: "A senha não atende aos requisitos de segurança." };

3. Execução do Projeto Como o projeto utiliza ES Modules com pacotes externos via bare imports, é obrigatório o uso de um empacotador (bundler) como o Vite para que o navegador resolva os caminhos corretamente.

Inicie o servidor com npm run dev

Acesse o link local exibido no terminal (ex: http://localhost:5173). O Vite fará a transpilação automática do seu pacote e o import funcionará perfeitamente. Caso não ocorra a alteração de imediato ao recarregar a página utilize o comando npx vite --force para limpar o cache do vite

Instalação

npm install @venowin/meu-primeiro-pacote