Posts Tagged validação

Validar Email com JavaScript

Novembro 5, 2007 às 2:12 pm · Arquivado em ASP, JavaScript ·Tagged , , , ,

Olá, temos muitas maneiras para validar um campo com JavaScript, vamos tratar agora o campo de Email.

Vou utilizar da maneira mais simples conhecida por um programador, que é obrigar o usuário digitar ao menos os caracteres: “@” e “.”

  1. Crie uma página de teste e um formulário, este aqui é simples: 
    <form action="teste.asp" method="post" id="form" name="form"> 
	<input type="text" name="nome"  />
	<input type="text" name="email"  />
	<input type="button" name="botao" value="Enviar" onClick="valida()">
</form>
  2. Crie a função”valida()”.
  3. Vamos utilizar “indexOf”, isso faz com que seja feita uma busca no campo procurando o valor definido: 
    <script> 
function valida(){
	if (document.form.email.value.indexOf("@")==-1||document.form.email.value.indexOf(".")==-1){
	alert('Digite um Email válido.');
	}else{  document.form.submit();  }
}
</script>
  4. Salve a página e rode para testar.

Quando for clicado em Enviar, será feita a verificação, caso tenha os caracteres específicos, então ele submete o formulário.

Abraços!

Comentários (1)

Validação de Campos com JavaScript

Novembro 5, 2007 às 1:38 pm · Arquivado em ASP, JavaScript ·Tagged , ,

Bom, muitas pessoas tem problemas quando estão programando em ASP e precisam que o usuário completem todos os campos do formulário, isso pelo menos aconteceu comigo no começo, hoje vejo que com JavaScript podemos fazer muitas coisas que com somente o ASP seria difícil.

Segue dois exemplos para obrigarem os usuários a preencherem os campos necessários sem precisar atualizar a página e fazer a verificação na próxima tela:

Primeiro exemplo envia uma mensagem para mostrando os campos vazios:

  1. Crie uma página para testes, nesse caso “teste.asp”, depois crie um formulário, esse aqui é de exemplo.
    <form action=”teste.asp” method=”post” id=”form” name=”form”>
    <input type=”text” name=”nome” />
    <input type=”text” name=”senha” />
    <input type=”button” name=”botao” value=”Enviar” OnClick=”valida();”>
    </form>
  2. Nesse caso não coloque um botão Submit, apenas Button, em OnClick, mande para a função “valida();”.
  3. Crie a função “valida()”, lembre-se que a função deve sempre estar acima da chamada.
  4. Segue a função:
    <script>
    function valida(){
    var msg=’Os seguintes campos estão vazios: ‘;
    if (document.form.nome.value==”){
    msg=(msg+’\nNome’)
    }
    if (document.form.senha.value==”){
    msg=(msg+’\nSenha’)
    }
    if (msg!=’Os seguintes campos estão vazios: ‘){
    alert(msg);
    }else{document.form.submit();}
    }
    </script>
  5. Salve a página e rode para testar.

Segundo exemplo, que não garanto o funcionamento além do Internet Explorer, porém acho melhor, pois não irrita o usuário com esses alertas, minha dica é utilizar os alertas o mínimo possível.

  1. Crie uma página para testes, nesse caso “teste.asp”, depois crie um formulário, esse aqui é de exemplo.
    <form action=”teste.asp” method=”post” id=”form” name=”form”>
    <input type=”text” name=”nome” onKeyUp=”valida();” />
    <input type=”text” name=”senha” onKeyUp=”valida();” />
    <input type=”submit” name=”botao” disabled=”disabled” value=”Enviar”>
    </form>
  2. Nesse caso, pode deixar o botão como “Submit”, porém desabilitado.
  3. A diferença é que quem chama a função é quando a tecla é solta nos campos.
  4. A função desabilita o botão de nome “botao” dentro do formulário, apenas será habilitado quando os dois campos estiverem preenchidos.
  5. Segue a função:
    <script>
    function valida(){
    if (document.form.nome.value==”||document.form.senha.value==”){
    document.form.botao.disabled=true;
    }else{document.form.botao.disabled=false;}
    }
    </script>
  6. Sempre que a tecla for solta irá chamar a função efetuando a verificação e se for verdadeira, libera o botão para continuar.

É isso ai, vocês podem adaptar para quantos campos quiserem da forma que acharem melhor, com a mensagem que preferirem.

Um abraço a todos!

Comentários (5)