In dit artikel zullen we leren hoe we een datum door middel van jQuery valideren. Dat wil zeggen, de gebruiker heeft tot nu toe in te voeren in het formaat dd /mm /jjjj of mm-dd-jjjj. Als de ingevoerde datum komt niet overeen met beide formaten, zal er een foutmelding worden weergegeven.
HTML-bestand voor "valideren Date met jQuery"
Laat ons een HTML-bestand dat een vorm toont dat bevat label, tekstveld, foutmelding en een submit knop. De tekst van het label is ingesteld op 'Enter Geboortedatum' en die van de foutmelding op 'Ongeldige datum'.
Deze vier punten worden ook toegewezen de klasse namen als 'label', 'infobox', 'fout' en 'submit' respectievelijk. Voor deze klasse namen, worden de desbetreffende klasse selectors geschreven in de externe style sheet. De HTML-bestand kan worden weergegeven als volgt:
Alle vier punten van bovenstaande HTML-bestand worden toegewezen respectieve klasse namen: etiket, infobox, errorand submitso dat de stijl eigenschappen gedefinieerd in de klasse selectors gespecificeerd in de externe style sheet stijl .
csscan automatisch worden toegepast op deze items
De klasse selectors gedefinieerd in de style sheet bestand zijn zoals hieronder weergegeven.
style.css
.label genaamd {float: left ; width: 150px; }
.infobox {width: 200px; }
.error {color: red; padding-left: 10px; }
.submit {margin-left: 150px; margin-top: 10px;}
Code voor "valideren Date met jQuery"
De jQuery code om de datum in het formaat dd /mm /jjjj of mm-dd -yyyy zo accepteren hieronder weergegeven.
$ (document) .ready (function () {
$ ('. error') te verbergen ();
$ ('. submit' ) .
Klik (functie (event) {
var data = $ ('infobox. ") val ();.
als (validate_date (data))
{
$ ('fout'.) te verbergen ();..
}
anders
{
$ ('error ') .toon ();
event.preventDefault ();
}
});
});
functie validate_date (datum)
{
var pattern = new RegExp (/\\ b \\ d {1,2} [\\ /-] \\ d {1,2} [\\ /- ] \\ d {4} \\ b /);
return pattern.test (datum);
}
De foutmelding wordt onzichtbaar gemaakt in het begin hierboven jQuery code. Vervolgens wordt een gebeurtenis click naar de submit knop bevestigd.
Bij het hanteren functie van de klikgebeurtenis, datum ingevoerd door de gebruiker in het veld invoerveld (dat is ingesloten in de overspanning element class naam infobox) opgehaald en opgeslagen in de variabele "data". De gegevensvariabele wordt doorgegeven aan de validate_date () functi