Skip to content

HOME

Jump to bottom
rcdmk edited this page Jun 5, 2011 · 14 revisions

VALIDAÇÃO GERAL DE FORMULÁRIOS E UTILIDADES JS

Há sempre diversas validações de formulário excepcionais, mas são raras as que suportam os formatos latinos de datas e números e da necessidade surgiu este projeto que não pretende subistituir qualquer validação já existente, mas serve pra quem precisa de uma forma de validação e não usa alguma framework que já possua ou que apenas precise das validações para formatos latinos e/ou funções utilitárias deste pacote.

Este projeto está sob a licença Creative Commons CC BY-SA: http://www.creativecommons.org/licenses/by-sa/3.0/

Índice
Licença
Exemplos

USO das validações:
Insira um atributo "rel" no campo para validar:

  • Preenchimento obigatório: o primeiro caractere do atributo tem que ser um # e o restante, separado por um espaço, será utilizado na mensagem de erro. Ex.: rel="# o nome do campo"
  • Validação de e-mail: o segundo caractere do atributo tem que ser @. Ex.: rel="#@ o e-mail de contato" (obrigatório) ou rel=" @ o e-mail de contato" (não obrigatório)
  • Validação de CPF: o segundo caractere tem que ser F (de pessoa Física);
  • Validação de CNPJ: o segundo caractere tem que ser J (de pessoa Jurídica);
  • Validação de tamanho ou comprimento do valor: o segundo caractere tem que ser T e o terceiro o tamanho a ser validado. Ex.: rel="#T9 o telefone"
  • Validação por comparação igual (senha e confirmação de senha, etc): o segundo caractere tem que ser = e o terceiro o ID do campo a ser comparado. Ex.: rel="#=confirmaSenha a senha"

As validações possíveis atualmente são:

primeira posição:

  • Campo obrigatório (não vazio): #

segunda posição:

  • Data: D
  • E-mail: @
  • CPF: F
  • CNPJ: J
  • URL (endereço ip/http/FTP/localhost): U
  • Tamanho específico obrigatório: Tn (n = número inteiro positivo)
  • Comparação de campos iguais (os campo precisa ser igual ao especificado): =idCampo
  • Comparação de campos maiores (o campo precisa ser maior que o especificado): >idCampo
  • Comparação de campos menores (o campo precisa ser menor que o especificado): <idCampo
  • Range - Faixa de númeos (x-y = maior ou igual a x e menor ou igual a y): RNx-y (x e y = números inteiros positivos)
  • Range - Faixa de Datas (x-y = maior ou igual a x e menor ou igual a y): RDx-y (x e y = datas no formato latino dd/mm/aaaa)

O arquivo inclui também diversas funções úteis:

validaCPFouCNPJ(valor):
Função que valida um CPF ou CNPJ
Obs.: utilizada na validaform()

  • @param string/number valor: um valor (número ou string, formatada ou não com os pontos, barra e traço) para validar
  • @return boolean: true se for válido, caso contrário false
  • @example:
if (!validaCPFouCNPJ("123.456.789-10")) alert("CPF ou CNPJ inválido");
output: "CPF ou CNPJ inválido";

validaCNPJ(varCNPJ):
Função que valida um CNPJ
Obs.: utilizada na validaCPFouCNPJ()

  • @param string/number varCNPJ: um valor (número ou string, sem os pontos, barra e traço) para validar
  • @return boolean: true se for válido, caso contrário false
  • @example:
if (!validaCNPJ("12345678901234")) alert("CNPJ inválido");
output: "CNPJ inválido";

validaCPF(varCPF):
Função que valida um CPF
Obs.: utilizada na validaCPFouCNPJ()

  • @param string/number varCPF: um valor (número ou string, sem os pontos e traço) para validar
  • @return boolean: true se for válido, caso contrário false
  • @example:
if (!validaCPF("12345678910")) alert("CPF inválido");
output: "CPF inválido";

validaData(data):
Função que valida uma data
Obs.: utilizada na validaform()

  • @param string data: uma string com uma data no formato latino para validar
  • @return boolean: true se for válida, caso contrário false
  • @example:
if (!validaData("31/02/2015")) alert("Data inválida");
output: "Data inválida";

formatar(campo, mascara, event, chave):
Função que formata a entrada de texto de um campo

  • @param object campo: a referência ao campo para aplicar a formatação
  • @param string mascara: uma string com a máscara de formatação
  • @param object event: a referência ao evento que a função é chamada
  • @param optional string chave: uma string com o caractere chave para ser usado na máscara
  • @return: nothing
  • @example:
<input type="text" ... onkeypress="formatar(this, '##/##/####', event, '#');" />

maiusculas(campo):
Função que formata a entrada de texto de um campo para maiúsculas

  • @param object campo: a referência ao campo para aplicar a formatação
  • @return: nothing
  • @example:
<input type="text" ... onkeyup="maiusculas(this);" />

minusculas(campo):
Função que formata a entrada de texto de um campo para minúsculas

  • @param object campo: a referência ao campo para aplicar a formatação
  • @return: nothing
  • @example:
<input type="text" ... onkeyup="maiusculas(this);" />

formataValor(campo, casas):
Função que formata o valor de um campo para um número de duas casas decimais com vírgula

  • @param object campo: a referência ao campo para aplicar a formatação
  • @param optional number casas default 2: um número inteiro representando a quantidade de casas decimais
  • @return: nothing
  • @example:
<input type="text" ... onkeyuf="formataValor(this);" />

cnvdtUS(data):
Função que converte uma string de data no formato americano
Obs.: utilizada na validaform()

  • @param string data: uma string com uma data para formatar
  • @return string: uma string com a data no formato mm/dd/aaaa
  • @example:
var dataUS = cnvdtUS("21/05/2011");
output: dataUS = "05/21/2011";

cnvvl(valor):
Função que converte uma string em número
Obs.: utilizada na validaform()

  • @param string valor: uma string com um valor para converter
  • @return number: um número com o valor da string convertida
  • @example:
var numero = cnvvl("2.000,00");
output: numero = 2000.00;

numStr(numero):
Função que converte um número em string formatada no padrão latino
Obs.: utilizada na validaform()

  • @param number numero: um número para converter
  • @return string: uma string com o valor do número convertido
  • @example:
var numeroStr = numStr(2000.00);
output: numeroStr = "2000,00";

SomenteNumeros(campo, event):
Função que restringe entrada de texto a somente números

  • @param object campo: a referência ao campo para aplicar a validação
  • @param object event: a referência ao evento que a função é chamada
  • @return boolean: true se a tecla pressionada for um número, caso contrário false
  • @example:
<input type="text" ... onkeypress="return SomenteNumeros(this, event);" />

SomenteNumerosDecimais(campo, event):
Função que restringe entrada de texto a somente números e vírgulas

  • @param object campo: a referência ao campo para aplicar a validação
  • @param object event: a referência ao evento que a função é chamada
  • @return boolean: true se a tecla pressionada for um número ou vírgula, caso contrário false
  • @example:
<input type="text" ... onkeypress="return SomenteNumerosDecimais(this, event);" />

SomenteLetras(campo, event):
Função que restringe entrada de texto a somente letras de a-z ou A-Z

  • @param object campo: a referência ao campo para aplicar a validação
  • @param object event: a referência ao evento que a função é chamada
  • @return boolean: true se a tecla pressionada for uma letra, caso contrário false
  • @example:
<input type="text" ... onkeypress="return SomenteLetras(this, event);" />

SemNumeros(campo, event):
Função que restringe a entrada de texto a qualquer catactere não numérico

  • @param object campo: a referência ao campo para aplicar a validação
  • @param object event: a referência ao evento que a função é chamada
  • @return boolean: false se o a tecla pressionada for um número, caso contrário true
  • @example:
<input type="text" ... onkeypress="return SemNumeros(this, event);" />

limitarEntrada(campo, event, expressao):
Função mestre que restringe a entrada de texto em um campo
Obs.: Usada nas demais funções restritivas de entrada

  • @param object campo: a referência ao campo para aplicar a validação
  • @param object event: a referência ao evento que a função é chamada
  • @param regex expressao: uma expressão regular para testar com a entrada
  • @return boolean: true se o a tecla pressionada passar pela expressão de validação, caso contrário false
  • @example:
<input type="text" ... onkeypress="return limitarEntrada(this, event, /[A-Z0-9]/);" />

limitaTextarea(campo, event):
Função restringe a entrada de texto textareas a seu atributo maxlength
Obs.: textareas não tem o atributo maxlength por padrão

  • @param object campo: a referência ao campo para aplicar a validação
  • @return boolean: true se o o tamanho do texto do campo for menor que o limite, caso contrário false
  • @example:
<input type="text" ... onkeyup="return limitaTextarea(this, event);"
onkeypress="return limitaTextarea(this, event);" />

marcaDesmarcaCampo(qual, marcar):
Função que aplica ou retira o estilo de campo com erro na validação
Obs.: utilizada na validaform()

  • @param object qual: a referência ao campo para aplicar/remover o estilo
  • @param boolean marcar: um valor boleano usado como flag para marcar ou desmarcar o campo
  • @return: nothing
  • @example:
marcaDesmarcaCampo(document.getElementById("algumCampo"), true);

completar(valor, tamanho, caractere):
Função que formata um valor com caracteres no início para completar um tamanho específico

  • @param string/number valor: uma string com um texto para formatar
  • @param number tamanho: um inteiro com o tamanho para retornar
  • @param string caractere: um inteiro com o tamanho para retornar
  • @return string: uma string formatada com o caractere especificado
  • @example:
var numeroComZeros = completar(15, 6, "0");
output: numeroComZeros = "000015";

String.prototype.reverse():
Função para reverter uma string
Obs.: usada em formataValor() e numStr()

  • @return string: a string invertida
  • @example:
var texto = "abcd123";
alert(texto.reverse());
output: "321dcba";

String.prototype.trim():
Função para "aparar" uma string (remover espaços nas pontas)

  • @return string: a string "aparada"
  • @example:
var texto = "    texto com espaço nas pontas    ";
alert(texto.trim());
output: "texto com espaço nas pontas";

Muitas possibilidades se abrem com essas ferramentas.

Clone this wiki locally