I denne artikkelen vil vi lære å validere en date gjennom jQuery. Det vil si at brukeren må oppgi dato på formatet mm /dd /åååå eller mm-dd-åååå. Hvis datoen inngikk ikke samsvarer med enten format, vil en feilmelding bli vist.
HTML-fil for "Validere Date gjennom jQuery"
La oss gjøre en HTML-fil som viser en form som inneholder etiketten, innspill tekstfeltet, feilmelding og en send-knappen. Teksten på etiketten er satt til "Enter fødselsdato", og at feilmeldingen er satt til 'Ugyldig dato ".
Disse fire elementene er også tildelt klasse navn som 'label', 'info', 'feil' og 'submit' hhv. For disse klassenavn, blir de respektive klasse velgerne skrevet i det ytre malen. HTML-filen kan vises som vist nedenfor:
Alle de fire elementer av over HTML-fil er tildelt respektive klassenavn: etikett, info, errorand submitso at stilegenskapene definert i klassevelgere spesifisert i eksternt stilark stil .csscan automatisk bli brukt på disse elementene
Klassevelgerne er definert i stilark filen er som vist nedenfor.
style.css
.
label {float: left ; width: 150px; }
.infobox {width: 200px; }
.error {color: red; padding-left: 10px; }
.submit {margin-left: 150px; margin-top: 10px;}
Kode for "Validere Date gjennom jQuery"
jQuery-kode for å godta datoen i formatet mm /dd /åååå eller mm-dd -yyyy er som vist nedenfor.
$ (document) .ready (function () {
$ ('. error') skjule ();
$ ('. submit' ) .Klikk (funksjon (hendelse) {
Var data = $ ('info.') val ();.
if (validate_date (data))
{
$ ('feil.') skjule ();..
}
annet
{
$ ('error ') .vis ();
event.preventDefault ();
}
});
});
funksjon validate_date (dato)
{
Var mønster = new RegExp (/\\ b \\ d {1,2} [\\ /-] \\ d {1,2} [\\ /- ] \\ d {4} \\ b /);
retur pattern.test (dato);
}
Feilmeldingen gjøres usynlig i begynnelsen i over jQuery kode. Deretter blir et klikk hendelsen festet til på send-knappen.
Ved håndtering funksjon for klikket hendelsen, dato angitt av brukeren i input tekstfeltet (som er vedlagt i span element av klasse navn 'info') hentes og lagres i 'data' variabel. Datavariabelen sendes til validate_date () -funksjonen for validering. Innholdet i 'data' variabel er tildelt 'dato' parameter i validate_date () -funksjonen. I validate_date () -funksjo