Neste artigo, vamos aprender como validar uma data através do jQuery. Ou seja, o usuário tem de inserir a data no formato dd /mm /aaaa ou mm-dd-aaaa. Se a data inserida não corresponde com qualquer formato, uma mensagem de erro será exibida.
HTML arquivo para "Validando Data através jQuery"
Vamos fazer um arquivo HTML que exibe um formulário que contém etiqueta, campo de texto de entrada, mensagem de erro e um botão de envio. O texto da etiqueta é definido como 'Enter Data de Nascimento "e que da mensagem de erro é definido como" Data inválida ".
Estes quatro itens também são atribuídos os nomes de classe como 'label', 'caixa informativa "," erro "e" enviar ", respectivamente. Para esses nomes de classe, os respectivos seletores de classe são escritas na folha de estilo externa. O arquivo HTML pode aparecer como mostrado abaixo:
Todos os quatro itens de arquivo HTML acima são atribuídos respectivos nomes de classe: etiqueta, infobox, errorand submitso que as propriedades de estilo definidas na seletores de classe especificados no estilo de folha de estilo externa .
csscan ser automaticamente aplicadas a estes itens
Os seletores de classe definidos no arquivo de folha de estilo são como mostrado abaixo:.
style.css
.label {float: left ; width: 150px; }
.infobox {width: 200px; }
.error {color: red; padding-left: 10px; }
.submit {margin-left: 150px; margin-top: 10px;}
Código de "Validação Data através jQuery"
O código jQuery para aceitar a data no formato dd /mm /aaaa ou mm-dd -yyyy é tão mostrado abaixo:.
$ (document) .ready (function () {
$ ('.
error') esconder ();
$ ('. submit' ) .click (function (event) {
var dados = $ ('infobox.') val ();.
if (validate_date (dados))
{
$ ('erro.') esconder ();
}
else
{
$ ('erro.. ') .mostrar ();
event.preventDefault ();
}
});
});
função validate_date (data)
{
padrão var = new RegExp (/\\ b \\ d {1,2} [\\ /-] \\ d {1,2} [\\ /- ] \\ d {4} \\ b /);
pattern.
test retorno (data);
}
A mensagem de erro é feita invisível no início em cima jQuery código. Em seguida, um evento de clique é anexado ao botão enviar. Na função de manipulação de eventos do evento clique, a data digitada pelo usuário no campo de texto de entrada (que é colocado no elemento espa