Validações JavaScript

24 respostas
P

Eae galera. Faz tempo que não posto nada, dessa vez a dúvida é meio chatinha...javascript...eu fiz um arquivo funcoes.js, e toquei tudo que é validação que eu faço mais repetidamente lá dentro...ai embaixo ta o código dela, usem e abusem :D. Lembrando é claro que qualquer otimização/dica/dúvida/sugestão é só falar ;)

PS: É pra funcionar tanto no IE quanto em Mozilla/FF...mas sabe como são essas coisas... :P

/*
Padawan's JavaScript-Mega-Validator 3000+
Todos os direitos reservados para Diego Pires Plentz
Você pode usar esse código nas suas páginas desde que mantenha os créditos ;-)
*/

//Verifica qual o browser do visitante e armazena na variável púbica clientNavigator,
//Caso Internet Explorer(IE) outros (Other)
if (navigator.appName.indexOf('Microsoft') != -1){
	clientNavigator = "IE";
}else{
	clientNavigator = "Other";
}
function Verifica_Data(data, obrigatorio){
//Se o parâmetro obrigatório for igual à zero, significa que elepode estar vazio, caso contrário, não
 var data = document.getElementById(data);
	var strdata = data.value;
	if((obrigatorio == 1) || (obrigatorio == 0 && strdata != "")){
		//Verifica a quantidade de digitos informada esta correta.
		if (strdata.length != 10){
			alert("Formato da data não é válido.
Formato correto:
- dd/mm/aaaa.");
			data.focus();
			return false
		}
		//Verifica máscara da data
		if ("/" != strdata.substr(2,1) || "/" != strdata.substr(5,1)){
			alert("Formato da data não é válido.
Formato correto:
- dd/mm/aaaa.");
			data.focus();
			return false
		}
		dia = strdata.substr(0,2)
		mes = strdata.substr(3,2);
		ano = strdata.substr(6,4);
		//Verifica o dia
		if (isNaN(dia) || dia > 31 || dia < 1){
			alert("Formato do dia não é válido.");
			data.focus();
			return false
		}
		if (mes == 4 || mes == 6 || mes == 9 || mes == 11){
			if (dia == "31"){
				alert("O mês informado não possui 31 dias.");
				data.focus();
				return false
			}
		}
		if (mes == "02"){
			bissexto = ano % 4;
			if (bissexto == 0){
				if (dia > 29){
					alert("O mês informado possui somente 29 dias.");
					data.focus();
					return false
				}
			}else{
				if (dia > 28){
					alert("O mês informado possui somente 28 dias.");
					data.focus();
					return false
				}
			}
		}
	//Verifica o mês
		if (isNaN(mes) || mes > 12 || mes < 1){
			alert("Formato do mês não é válido.");
			data.focus();
			return false
		}
		//Verifica o ano
		if (isNaN(ano)){
			alert("Formato do ano não é válido.");
			data.focus();
			return false
		}
	}
}

function Compara_Datas(data_inicial, data_final){
	//Verifica se a data inicial é maior que a data final
	var data_inicial = document.getElementById(data_inicial);
	var data_final   = document.getElementById(data_final);
	str_data_inicial = data_inicial.value;
	str_data_final   = data_final.value;
	dia_inicial      = data_inicial.value.substr(0,2);
	dia_final        = data_final.value.substr(0,2);
	mes_inicial      = data_inicial.value.substr(3,2);
	mes_final        = data_final.value.substr(3,2);
	ano_inicial      = data_inicial.value.substr(6,4);
	ano_final        = data_final.value.substr(6,4);
	if(ano_inicial > ano_final){
		alert("A data inicial deve ser menor que a data final."); 
		data_inicial.focus();
		return false
	}else{
 	if(ano_inicial == ano_final){
  	if(mes_inicial > mes_final){
   	alert("A data inicial deve ser menor que a data final.");
				data_final.focus();
				return false
			}else{
				if(mes_inicial == mes_final){
					if(dia_inicial > dia_final){
						alert("A data inicial deve ser menor que a data final.");
						data_final.focus();
						return false
					}
				}
			}
		}
	}
}

function Verifica_Hora(hora, obrigatorio){
//Se o parâmetro obrigatório for igual à zero, significa que elepode estar vazio, caso contrário, não
	var hora = document.getElementById(hora);
	if((obrigatorio == 1) || (obrigatorio == 0 && hora.value != "")){
		if(hora.value.length < 5){
			alert("Formato da hora inválido.
Por favor, informe a hora no formato correto: hh:mm");
			hora.focus();
			return false
		}
		if(hora.value.substr(0,2) > 23 || isNaN(hora.value.substr(0,2))){
			alert("Formato da hora inválido.");
			hora.focus();
			return false
		}
		if(hora.value.substr(3,2) > 59 || isNaN(hora.value.substr(3,2))){
			alert("Formato do minuto inválido.");
			hora.focus();
			return false
		}
	}
}

function Verifica_Email(email, obrigatorio){
//Se o parâmetro obrigatório for igual à zero, significa que elepode estar vazio, caso contrário, não
	var email = document.getElementById(email);
	if((obrigatorio == 1) || (obrigatorio == 0 && email.value != "")){
		if(!email.value.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+.[a-zA-Z0-9._-]+)/gi)){
			alert("Informe um e-mail válido");
			email.focus();
			return false
		}
	}
}

function Verifica_Tamanho(campo, tamanho){
//usado para campos textarea onde não se tem o atributo maxlenght
	var campo = document.getElementById(campo);
	if(campo.value.length > tamanho){
		alert("O campo suporta no máximo " + tamanho + " caracteres.");
		campo.focus();
		return false
	}
}

function Verifica_Cep(cep, obrigatorio){
//Se o parâmetro obrigatório for igual à zero, significa que elepode estar vazio, caso contrário, não
	var cep    = document.getElementById(cep);
	var strcep = cep.value;
	if((obrigatorio == 1) || (obrigatorio == 0 && strcep != "")){
		if (strcep.length != 9){
			alert("CEP informado inválido.");
			cep.focus();
			return false
		}else{
			if (strcep.indexOf("-") != 5){
				alert("Formato de CEP informado inválido.");
				cep.focus();
				return false
			}else{
				if (isNaN(strcep.replace("-","0"))){
					alert("CEP informado inválido.");
					cep.focus();
					return false
				}
			}
		}
	}	  
}

function Bloqueia_Caracteres(evnt){
//Função permite digitação de números
	if (clientNavigator == "IE"){
		if (evnt.keyCode < 48 || evnt.keyCode > 57){
			return false
		}
	}else{
		if ((evnt.charCode < 48 || evnt.charCode > 57) && evnt.keyCode == 0){
			return false
		}
	}
}

function Ajusta_Data(input, evnt){
//Ajusta máscara de Data e  permite digitação de números
	if (input.value.length == 2 || input.value.length == 5){
		if(clientNavigator == "IE"){
			input.value += "/";
		}else{
			if(evnt.keyCode == 0){
				input.value += "/";
			}
		}
	}
//Chama a função Bloqueia_Caracteres para  permitir a digitação de números
	return Bloqueia_Caracteres(evnt);
}

function Ajusta_Hora(input, evnt){
//Ajusta máscara de Hora e  permite digitação de números
	if (input.value.length == 2){
		if(clientNavigator == "IE"){
			input.value += ":";
		}else{
			if(evnt.keyCode == 0){
				input.value += ":";
			}
		}
	}
//Chama a função Bloqueia_Caracteres para  permitir a digitação de números
	return Bloqueia_Caracteres(evnt);
}

function Ajusta_Cep(input, evnt){
//Ajusta máscara de CEP e  permite digitação de números
	if (input.value.length == 5){
		if(clientNavigator == "IE"){
			input.value += "-";
		}else{
			if(evnt.keyCode == 0){
				input.value += "-";
			}
		}
	}
//Chama a função Bloqueia_Caracteres para  permitir a digitação de números
	return Bloqueia_Caracteres(evnt);
}

function Atualiza_Opener(){
//Atualiza a página opener da popup que chamar a função
	window.opener.location.reload();
}

é só salvar esse blocão de texto num arquivo funcoes.js por exemplo e "importar" ele nas páginas(pra quem não sabe <script language="JavaScript" type="text/javascript" src="../inc/funcoes.js"></script> ) que desejarem usar as funções...pra utilizar é bem simples...nas de validação é só adicionar algo do tipo
if(Verifica_Cep("cep", 0) == false){ return false }
if(Verifica_Email("email", 0) == false){ return false }
if(Verifica_Data("data_nascimento", 1) == false){ return false }

dentro da validação principal da sua página...ficaria algo do tipo

function Valida(){
	if(document.formulario.nome.value == ""){
		alert("Preencha o nome da pessoa");
	}
	if(Verifica_Data("data_nascimento", 1) == false){ return false }
	if(Verifica_Hora("hora_compromisso", 1) == false){ return false }
	if(Verifica_Cep("cep", 0) == false){ return false }
	if(Verifica_Email("email", 0) == false){ return false }
	if(Verifica_Email("descricao", 4000) == false){ return false }
}

Lembrando que os campos precisam ter preenchido o atributo id para que validação funcione.
Para validar algumas coisas direto no campo é só usar:

<input name="data" type="text" id="data" maxlength="10" onKeypress="return Ajusta_Data(this, event);"> 
<input name="hora" type="text" id="hora" maxlength="5" onKeypress="return Ajusta_Hora(this, event);"> 
<input name="cep" type="text" id="cep" maxlength="9" onKeypress="return Ajusta_Cep(this, event);">
<input name="numero" type="text" id="numero" maxlength="20" onKeypress="return Bloqueia_Caracteres(event);"">

Queria saber se tem alguma forma + curta ou melhor de validar os campos, sem precisar usar isso

if(Verifica_Email("descricao", 4000) == false){ return false }

por exemplo

24 Respostas

A

Muito util!!!
Valeu mesmo!
:lol:

_

Valeu cara :smiley: tava enrolaaando pra fazer essa checagem de data … hehe valeu mesmo :smiley:

M

Valeu kra por compartilhar conosco.

P

Valeu os elogios ai pessoal, mas ninguém sabe se tem algum jeito de fazer melhor a validação não(ou da uma melhoradinha no código)? :wink:

L

E ae GURI… :wink:

Valeu a citação. :smiley:

_

AuAhAUaHuahauhaUhauAHuahAU heheh …

Quanto a jeito melhor … bem … tem o tal do XForms, mas nunca usei.
http://www.w3.org/MarkUp/Forms/

E alguns frameworks web (WebWork2) possuem algum mecanismo de validação no lado cliente.

P

“LIPE”:

Quanto a jeito melhor … bem … tem o tal do XForms, mas nunca usei.
http://www.w3.org/MarkUp/Forms/

E alguns frameworks web (WebWork2) possuem algum mecanismo de validação no lado cliente.

Não não, to falando de jeito melhor com JScript mesmo, tipo, alguam forma de deixar o fonte ali mais claro, simples, curto, sei lá,hehe

N
if(Verifica_Email("descricao", 4000) == false){ return false }

É meio besta… mas voce pode encurtar assim

return (Verifica_Email("descricao", 4000));
_

hum

então estuda regular expressions :smiley: é chato mas é bom \o/

P
"Nati":
if(Verifica_Email("descricao", 4000) == false){ return false }

É meio besta... mas voce pode encurtar assim

return (Verifica_Email("descricao", 4000));

Nati, assim funciona somente em alguns casos, mas em uma verificação do tipo

function Verifica_Dados(){
  var formulario          = document.formulario;

  return (Verifica_Cep("paciente1_cep", 0));
  return (Verifica_Data("paciente1_data_nasc", 1));
  return (Verifica_Email("paciente1_email", 0));
  return (Verifica_Data("paciente2_data_nasc", 0));
  return (Verifica_Email("paciente2_email", 0));
  formulario.action = "confirma_paciente.asp";
  formulario.submit();
}

Da "pau" :(

P

Só para deixar um recado, um dia eu ainda descobro quem foi o baiano da Microsoft que ficou com “preguiça” de implementar o event.target no IE!

UPDATE: Versão atualizada em http://plentz.org/unsorted/functions.js.html

I

Bem pessoal eu desenvolvi uma validação que acho eu ser melhor que essa, LONGE de mim te sacanear Plentz :slight_smile: até pq eu peguei uma validação sua e por isso que estou aqui HEHEHE Mas com a minha validação não precisa nem saber javascript pra fazer só precisa de algum conhecimento de expressão regular que não é nada difícl (Aqui na empresa onde eu trabalho depois que eu fiz essa validação até design começou a fazer validação nos HTML que eles nos enviam)! E se quiser posso mandar uma apostilinha que eu mesmo fiz de Expressão Regular pra quem não conhece! HEHEHE… vou colocar um exemplo de como usar aqui e o arquivo vai em anexo!

456 Bem como podem ver basta colocar no onSubmit do form a chamada da minha função e definir dentro dos inputs mesmo essa 4 novos atributos inventados por mim! required -> se o campo é de preenchimento obrigatório, requiredmsg -> Caso o campo seja obrigatório e não estaja prenchido da essa msg de erro, mascara -> onde deve ser colocada a ER pra validar o campo ou uma função qualquer desenvolvida por vc que retorna True ou False (No formato STRING), e por ultimo o atributo errormsg que é a msg de erro para quando a validação retorna false. Bem pessoal funciona tanto no IE quanto no FF mas se alguem achar alguma falha gostaria muito que me avisassem. Muito obrigado e qualquer coisa me mandem e-mail terei o maior prazer em ajudar quem precise :)
B

Isso não poderia ser parte de uma BrazilUtils API de Javascript ?

P

function Valida(){ if(document.formulario.nome.value == ""){ alert("Preencha o nome da pessoa"); } if(Verifica_Data("data_nascimento", 1) == false){ return false } if(Verifica_Hora("hora_compromisso", 1) == false){ return false } if(Verifica_Cep("cep", 0) == false){ return false } if(Verifica_Email("email", 0) == false){ return false } if(Verifica_Email("descricao", 4000) == false){ return false } }

substituir os ifs por returns não vai funcionar pois vc quer validar TUDO. uma função termina na instrução return. seria melhor fazer:

function Valida(){ if(document.formulario.nome.value == ""){ alert("Preencha o nome da pessoa"); return false; } return (Verifica_Data("data_nascimento", 1) && (Verifica_Hora("hora_compromisso", 1) && (Verifica_Cep("cep", 0) && (Verifica_Email("email", 0) && (Verifica_Email("descricao", 4000)); }

I

Poxa galera ninguem se habilitou a testar a minha validação HEHEHE Poxa garanto que se testarem vão gostar HEHEHE…

D

Uma dica pra você… Eu costumo usar uma técnica conhecida no javascript como Behavior, que consiste basicamente em usar seletores CSS para definir comportamento. Por exemplo:

Para um campo com validação de data.

Para vazer a validação, basta buscar os elementos do form que contém uma determinada classe e validar. Usando prototype (http://prototype.conio.net/) isso fica facinho…

var elements = document.getElementsByClassName('validate-data');
elements.each(
     function validateElement(element) {
          // verificar se o valor do elemento é válido
     }
);

Depois é só usar um observer (http://www.sergiopereira.com/articles/prototype.js.html#Form.Observer) para escutar o evento onsubmit do form.

D

ivon:
Poxa galera ninguem se habilitou a testar a minha validação HEHEHE Poxa garanto que se testarem vão gostar HEHEHE…
A idéia é interessante, mas torna o HTML inválido (http://validator.w3.org), já que não existem campos como required ou errorMsg nos componentes HTML. E, acredite, isso é importante.

J

Plentz, não sei se é mais "entendível", mas eu costumo utilizar essa para digitação de números, porque habilita o backspace e as setas para os lados

e é cross-browser

/*
Uso:

onKeyPress="return SemLetras(event);"

*/

function SemLetras(evtKeyPress) {
	var nTecla;
	nTecla = (evtKeyPress.which) ? evtKeyPress.which : evtKeyPress.keyCode;
	
	if((nTecla > 47 && nTecla < 58)||(nTecla == 8)||(nTecla == 9)||(nTecla == 37)||(nTecla == 39)||(nTecla == 46)){
		return true;
	}else{
		return false;
	}
}
P

Aproveitando o gancho como fazer isso funcionar em todos os browsers?

event.returnValue = false;
J

Pessoal,

Tinha um erro no meu código, mil desculpas, só descobri agora
mas vai aí o corrigido
se alguém puder deixar mais claro ainda, agradeço

Uso: onKeyPress="return SomenteNumeros(event);"

function SomenteNumeros(evtKeyPress) {
	var nTecla;
	var detecta;
	var boolean = false;

	if(window.event){
		nTecla = window.event.keyCode;
		detecta = 0;
	}else if (evtKeyPress){
		nTecla = evtKeyPress.which;
		detecta = 1;
	}

	if(detecta==0){
		if(nTecla > 47 && nTecla < 58){
			boolean = true;
		}
	}else{
		if((nTecla > 47 && nTecla < 58)||(nTecla == 8)||(nTecla == 9)||(nTecla == 37)||(nTecla == 39)||(nTecla == 46)){
			boolean = true;
		}
	}

	return boolean;
}
J

E acho que isso vai ajudar bastante:

http://www.javascriptkit.com/javatutors/javascriptkey.shtml

I

Só um bizu!
Se vc for verificar o navegador e estiver programando no visual studio 2005 fazer desta forma:

alert(navigator.appName)

Assim o javascript vai emitir uma mensagem com o nome do navegador que esta sendo utilizado.

S

A validação de ano bissexto está incompleta. deve ser assim:

function isLeapYear(year){ if(year%400==0||(year%4==0&&year%100!=0)) return true; return false; }

V

Cara, eu acho foda quando alguém pega um tópico de dois anos atrás e ressuscita. Acho que tópicos com mais de uns dois meses desde a última resposta deviam ser bloqueados automaticamente.

Criado 11 de agosto de 2004
Ultima resposta 14 de mar. de 2008
Respostas 24
Participantes 15