Validações JavaScript

24 respostas
plentz

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

andre_a_s

Muito util!!!
Valeu mesmo!
:lol:

_fs

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

M

Valeu kra por compartilhar conosco.

plentz

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:

_fs

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.

plentz

“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

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

É meio besta… mas voce pode encurtar assim

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

hum

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

plentz
"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" :(

plentz

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 :)
boaglio

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

peczenyj

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…

David

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.

David

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.

jaboot

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;
	}
}
Pedrosa

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

event.returnValue = false;
jaboot

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;
}
jaboot

E acho que isso vai ajudar bastante:

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

Isaquefg

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.

spycall

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; }

victorwss

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