I denne artikel vil vi lære at validere en dato via jQuery. Det vil sige, brugeren har til at indtaste dato i formatet mm /dd /åååå eller mm-dd-åååå. Hvis datoen indtastes ikke passer med enten format, vil en fejlmeddelelse.
HTML-fil for "Validering Dato via jQuery"
Lad os gøre en HTML-fil, der viser en form, indeholder etiket, input tekstfelt, fejlmeddelelsen og en indsende knap. Teksten til etiketten er sat til 'Indtast fødselsdato ", og at af fejlmeddelelsen er sat til' Ugyldig dato«.
Disse fire elementer er også tildelt klassen navne som 'label', 'infobox "," fejl "og" submit' hhv. For disse klasse navne, er de respektive klasse selektorer skrevet i eksternt typografiark. HTML-filen kan vises som vist nedenfor:
Alle fire elementer af ovenstående HTML-fil tildeles respektive klasse navne: etiket, infobox, errorand submitso at den stil egenskaber er defineret i klassen selektorer angivet i eksternt typografiark stil .csscan automatisk anvendes på disse poster
klasse selektorer defineret i typografiark fil er som vist nedenfor:.
style.css
.
label {float: venstre ; bredde: 150px; }
.infobox {bredde: 200px; }
.error {color: red; padding-venstre: 10px; }
.submit {margin-venstre: 150px; margin-top: 10px;}
Kode for "Validering Dato via jQuery"
jQuery kode til at acceptere den dato i formatet mm /dd /åååå eller mm-dd -yyyy er så vist nedenfor:.
$ (dokument) .ready (function () {
$ (". fejl«) skjul ();
$ ('. submit' ) .Klik (funktion (event) {
Var data = $ ('infobox. «) val ();.
if (validate_date (data))
{
$ ("fejl.") skjul ();..
}
andet
{
$ ('fejl ") .vis ();
event.preventDefault ();
}
})
})
funktion validate_date (dato)
{
var mønster = new RegExp (/\\ b \\ d {1,2} [\\ /-] \\ d {1,2} [\\ /- ] \\ d {4} \\ b /)
retur pattern.test (dato),
}
Fejlmeddelelsen er lavet usynlige i starten ovenfor jQuery kode. Derefter et klik begivenhed knyttet til send-knappen.
I håndteringen begivenhed funktion af klik begivenhed, den dato, indtastet af brugeren i input tekstfeltet (der er omsluttet i span element i klasse navn "infobox") hentes og lagres i de data 'variabel. Den variable data overføres til validate_date () funktion til validering. Indholdet af "data" variabel tildeles »date« parameter fo