Como Validar uma Data em JavaScript

Neste tutorial, vamos aprender como validar uma data, ou seja, vamos aprender como verificar se uma determinada data é válida, se ela existe ou não, usando programação Java Script.

Datas válidas

Uma das coisas mais comuns que você vai fazer como programador JavaScript, é pedir datas ao usuários, como por exemplo, a data de nascimento.

Mas tem um problema: nunca duvide da capacidade do seu usuário.
Certamente alguns vão fornecer dia no lugar do mês, vão digitar 04 ao invés de 2004 e outras bizarrices.

Por isso, é sempre importante verificar se aquela data que ele forneceu está correta.
O nome disse é validação de data.

O grande segredo para validar uma data é atentar para o mês.
Os seguintes meses possuem:
  • 31 dias: 1, 3, 5, 7, 8, 10 e mês 12
  • 30 dias: 4, 6, 9 e mês 11
  • 29 dias: mês 2 em anos bissextos
  • 28 dias:  mês 2 em anos não bissextos


Ou seja, você precisa saber quando um ano é bissexto ou não.
Vamos usar o tutorial sobre Como saber se um ano é bissexto ou não.

Validando uma data em JavaScript

Vamos lá.

Primeiro, pedimos o dia, mês e ano ao usuário, através de formulário HTML.
Quando o usuário clicar no botão "Validar", a página invoca a função "validar()" do JavaScript.

O que vamos fazer nessa função é tratar o mês, e para isso vamos usar o switch em JS.
Vamos usar cases acumulativos.

Primeiro, vem os case de valores 1,3, 5, 7, 8, 10 e 12.
Se cair neles, é porque os meses podem ter no máximo 31 dias.
Acima disso, está errado.

Depois vem os cases 4, 6, 9 e 11.
Se cair neles, os dias podem ter no máximo o valor 30, de 30 dias.
Acima disso (como 31), é erro.

Agora vem o pulo do gato.
Se cair no case 2, precisamos fazer um teste condicional para saber se o ano é bissexto ou não.

Se for bissexto, os dias podem ser no máximo 29 dias, acima disso está errado.
Se não for bissexto, os dias podem ser no máximo 28, acima disso está errado.

Veja como ficou o código HTML:



<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   <script type="text/javascript" src="script.js"></script>
       Digite sua data de nascimento: <br />
       Dia:<input id="dia" type="number"> <br />
       Mês:<input id="mes" type="number"> <br />
       Ano:<input id="ano" type="number"> <br />
    <button onclick="validar()">Validar</button><br />

    Resposta: <div id='resposta' style='display:inline'></div>
 </head>
</html>


Agora o código do arquivo script.js :


function validar(){
    var dia = parseInt(document.getElementById("dia").value);
    var mes = parseInt(document.getElementById("mes").value);
    var ano = parseInt(document.getElementById("ano").value);
    resposta = document.getElementById('resposta');

    switch(mes){
     case 1: case 3: case 5: case 7: 
     case 8: case 10: case 12:
      if(dia <= 31)
       resposta.innerHTML = "Data válida";
      else
       resposta.innerHTML = "Inválido (mes com mais de 31 dias)";
      break ;
     case 4: case 6:
     case 9: case 11:
      if(dia <= 30)
       resposta.innerHTML = "Data válida";
      else
       resposta.innerHTML = "Inválido (mes com mais de 30 dias)";
      break ;
     case 2:
      if( (ano%400 == 0) || (ano%4==0 && ano%100!=0) )
       if( dia <= 29)
        resposta.innerHTML = "Data válida";
       else
        resposta.innerHTML = "Inválido (mes com mais de 29 dias)";
      else
       if( dia <= 28)
        resposta.innerHTML = "Data válida";
       else
        resposta.innerHTML = "Inválido (mes com mais de 28 dias)";
    }
}


Teste:


Digite sua data de nascimento:
Dia:
Mês:
Ano:

Resposta:


Nenhum comentário:

Postar um comentário