Validação Web: mudanças entre as edições

De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar
 
(Uma revisão intermediária por um outro usuário não está sendo mostrada)
Linha 3: Linha 3:




''Olá amigos, 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.''
''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.''




Linha 14: Linha 14:
'''1. Criando o formulário:'''
'''1. Criando o formulário:'''


''Primeiramente, vamos fazer nosso formulário:''
''Primeiramente, vamos fazeeeeer nosso formulário:''
<pre>
<pre>
Nome:  
Nome:  

Edição atual tal como às 18h51min de 10 de fevereiro de 2014

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

Exemplo de Validação de Formulário