Validação Web

Validação WEB

Olá amigooos, hoje em dia um dos usos mais comuns na programação JavaScript com certeza é a validação de campos, isso porque não precisamos direcionar o usuário para uma nova página, a validação é feita via Browser, ou seja, o resultado da validação é exibido em um alert.

Criaremos nosso formulário onde o usuário entrará com os dados para contato ou coisa desse tipo.

O principal de tudo é colocar nome nos campos, pois é a partir dos nomes que validamos

1. Criando o formulário:

Primeiramente, vamos fazeeeeer nosso formulário:

Nome: 

Email: 

Senha: 

Repitir Senha: 

Bom aqui criamos o formulário;

- Linha 15: [onclick="return validar()"] estamos chamando a função validar() no momento que o usuário clicar em enviar;

2. Criando a função validar()

Agora, vamos criar nosso código javascript para fazer validação, lembrando que esse código deve estar, de preferência, entre as tags head (cabeçalho):

<script language="javascript" type="text/javascript">
 function validar(){
}
</script>

No código acima foi criada a função validar();

<script language="javascript" type="text/javascript">
 function validar(){
 
 var nome = form1.nome.value;
 var email = form1.email.value;
 var senha = form1.senha.value;
 var rep_senha = form1.rep_senha.value;
 
}
</script>

Dentro de nossa função criamos as varí­aveis para cada campo de nosso formulário;

- Linha 3: criamos a varíavel nome e atribuimos o valor do campo nome, ou seja form1.nome.value (Valor do campo nome do nosso formulário);

- O mesmo foi feito nas linhas 4, 5 e 6;

<script language="javascript" type="text/javascript">
 function validar(){
 
 var nome = form1.nome.value;
 var email = form1.email.value;
 var senha = form1.senha.value;
 var rep_senha = form1.rep_senha.value;
 

 if(nome == ""){
 alert("Preencha o campo com seu nome");
 form1.nome.focus();
 return false;
 }
 
}

Linha 8: Se nome (O campo nome, pois declamos a variável) estiver em branco, as ações serão executadas;

- Linha 9: Dispara uma mensagem de alerta dizendo que o usuário deve preencher o campo nome;

- Linha 10: Da foco no campo nome;

- Linha 15: Retorna a resposta false, ou seja, que não deve continuar enviando os dados;

- Resumindo, caso o campo nome esteje em branco será exibido uma mensagem de alerta dizendo ao usuário que preencha o campo com seu nome;

- O mesmo pode e será feito com os outros campos;

if(nome.length < 5){
 alert("Digite seu nome completo");
 form1.nome.focus();
 return false;
 }

Podemos verificar também se um campo tem o número de caracteres mínimo/máximo especificado.

- Para isso utilizamos length, ou seja, se o numero de caracteres do campo nome for menor que 5 a ação será executada.

if(senha != rep_senha){
 alert("Senhas diferente");
 form1.senha.focus();
 return false;
 }

- Podemos também ver se dois campos coincidem, no caso a senha e sua repetição;

- Se senha (campo senha) for diferente de rep_senha (Campo Repitir Senha) as ações serão executadas;

- Podemos utilizar todos os métodos de comparação:

Menor que: < Maior que: > Igual a: == Diferente de: !=

Conclusão

Isso é só um pouco do que o javascript pode fazer, mas já é útil para validar seus formulários de uma forma mais rápida e fácil