En este artículo, vamos a aprender cómo validar una fecha a través de jQuery. Es decir, el usuario tiene que introducir la fecha en el formato dd /mm /aaaa o dd-mm-aaaa. Si la fecha introducida no coincide con el formato, se mostrará un mensaje de error.
HTML archivo para "Validar Fecha través de jQuery"
Vamos a hacer un archivo HTML que muestra un formulario que contiene la etiqueta, el campo de entrada de texto, mensaje de error y un botón de envío.
El texto de la etiqueta se establece en 'Enter Fecha de nacimiento' y el de mensaje de error se establece en "Fecha no válida". Estos cuatro elementos también se asignan los nombres de clase como "etiqueta", "caja de información ',' error 'y' enviar ', respectivamente. Para estos nombres de clase, los selectores de clase respectivas están escritos en la hoja de estilos externa.
El archivo HTML puede aparecer como se muestra a continuación:
Los cuatro elementos de archivo HTML anterior se asignan nombres de las clases respectivas: etiqueta, caja de información, errorand submitso que las propiedades de estilo definidas en los selectores de clase especificados en el estilo de hoja de estilos externa .csscan aplicarse automáticamente a estos artículos
Los selectores de clase definidos en el archivo de hoja de estilos son como se muestra a continuación:.
style.css
.label {float: left ; Ancho: 150px; }
.
infobox {width: 200px; }
.Error {color: red; padding-left: 10px; }
.submit {margin-left: 150px; margin-top: 10px;}
Código para "Validar Fecha través de jQuery"
El código jQuery para aceptar la fecha en el formato dd /mm /aaaa o -yyyy mm-dd es tan se muestra a continuación:.
$ (document) .ready (function () {
$ ('. Error ") ocultar ();
$ ('. submit ' ) .click (function (evento) {
var data = $ ('caja de información.') val ();.
si (validate_date (datos))
{
$ ('error.') ocultar ();..
}
cosa
{
$ ('error ') .show ();
event.preventDefault ();
}
});
});
validate_date función (fecha)
{
var pattern = new RegExp (/\\ [\\ /-] b \\ d {1,2} \\ d {1,2} [\\ /- ] \\ d {4} \\ b /);
pattern.test retorno (fecha);
}
El mensaje de error se hace invisible al comienzo de arriba jQuery código. Entonces, un evento click se adjunta al botón de enviar.
En la funci