Arquivo

Arquivo da Categoria ‘Javascript’

Validação de e-mail em um formulário web

25, maio, 2009

Muitas vezes em um campo de um formulário precisamos garantir ao máximo a consistência e veracidade dos dados fornecidos pelo usuário. Um dos campos mais importantes em um formulário web é, sem dúvidas, o endereço de e-mail. Infelizmente este campo também é o maior alvo de erros de digitação por parte do usuário.

Para minimizar as possibilidades de erros é recomendável adicionar um verificador de e-mail em seu formulário web. Veja:

No campo “e-mail” do seu formulário adicione os eventos oncopy, onpaste e oncut, assim:

<input type="text" id="email" name="email" oncopy=”return false;” onpaste=”return false;” oncut=”return false;” size=”20″>

Adicione também um novo campo para o usuário confirmar o endereço de e-mail (ex: redigite o seu e-mail):

<input type="text" id="email2" name="email2" oncopy=”return false;” onpaste=”return false;” oncut=”return false;” size=”20″>

Dessa forma o usuário terá que digitar o endereço de e-mail duas vezes, manualmente, sem poder usar ctrl+c, ctrl+v (copiar, colar).
O script abaixo fará o trabalho de verificar se o e-mail informado é válido e se o e-mail confirmado é igual ao e-mail fornecido:

<script language="JavaScript1.2">
function Trim(str){
return str.replace(/^\s+|\s+$/g,"");
}
function validar(){
var d = document.formulario;
var str = Trim(d.email.value);
var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if (!filter.test(str)) {
alert(”Este endereço de e-mail não é válido!”);
d.email.focus();
d.email.select();
return false;
}
else if (d.email.value != Trim(d.email2.value)){
alert(”O e-mail informado não coincide com o e-mail redigitado.”);
d.email2.focus();
d.email2.select();
return false;
}
else
return true;
}
</script>

Por fim, no seu form, inclua o evento onsubmit:

<form method="POST" name="formulario" id="formulario" onSubmit=”return validar()” action=”pagina_de_acao.php”>

Basicamente o que o sistema fará é:  verificar se o endereço de e-mail informado é válido e se o usuário redigitou corretamente o endereço de e-mail. Se estas duas condições forem satisfeitas, aí o formulário é enviado.

Com isso reduzimos pelo menos 90% dos erros de digitação de e-mails em nossos formulários.

 …

Limite-Infinito Javascript, Programação

Máscara para CEP em javascript

9, maio, 2009

Apresento-lhes um javascript muito útil para formatação de campos de CEP em formulários. Este foi o melhor que encontrei. Fiz algumas adaptações para melhora-lo mais.
Com esta máscara, não é possível inserir no campo CEP nada além de números. O hífen (-), é inserido automaticamente após o quinto caractere (ex: 12345-678).

Coloque o código abaixo no HEAD da página:

<script>
function MascaraCEP(campo, teclaPress) {
  if (window.event){
    var tecla = teclaPress.keyCode;
  } else {
    tecla = teclaPress.which;
  }
  var s = new String(campo.value);
  s = s.replace(/(\.|\(|\)|\/|\-| )+/g,'');
  tam = s.length + 1;
  if (tam > 5 && tam < 7)
    campo.value = s.substr(0,5) + '-' + s.substr(5, tam);
}

function digitos(event){
  if (window.event) {
    // IE
    key = event.keyCode;
  } 
  else if (event.which) {
    // netscape
    key = event.which;
  }
  if (key != 8 || key != 13 || key < 48 || key > 57)
    return (((key > 47) && (key < 58)) || (key == 8 ) || (key == 13));
    return true;
}
</script>

No campo CEP do formulário inclua os eventos onkeypress e onkeyup como abaixo:

<input type="text" name="cep" maxlength="9" size="11"
onKeyPress="return digitos(event, this);" onkeyup="MascaraCEP(this, event);">

Bom proveito e qualquer dúvida é só comentar!

Limite-Infinito Javascript, Programação , , ,