Datum-Regex-JavaScript-Validator

Was ist ein Datum-Regex?

In JavaScript hilft ein regulärer Ausdruck (regex) für Datumsangaben dabei zu prüfen, ob ein String einem bestimmten Datumsformat entspricht. Ob Sie Formulare, Datenfilter oder Logs entwickeln: Die Validierung von Datumsangaben stellt sicher, dass Benutzer Daten korrekt eingeben und verhindert nachgelagerte Fehler.

Ein Datum-Regex kann folgende Muster erkennen:

• DD/MM/YYYY

• MM-DD-YYYY

• YYYY-MM-DD

• ISO 8601-Zeitstempel wie 2023-06-05T12:30:00Z

JavaScript-Regex-Muster für die Datumsvalidierung

Ein häufig verwendetes regex für die grundlegende DD/MM/YYYY-Validierung:

/^(0[1-9]|[12][0-9]|3[01])[\/\-](0[1-9]|1[0-2])[\/\-](19|20)\d\d$/

Aufschlüsselung:

• ^(0[1-9]|[12][0-9]|3[01]) - Validiert den Tag (01-31)

• [\/\-] - Erkennt / oder - als Trennzeichen

• (0[1-9]|1[0-2]) - Validiert den Monat (01-12)

• (19|20)\d\d$ - Validiert das Jahr (1900-2099)

Datum mit regex in JavaScript validieren

function isValidDate(dateString) {
  const dateRegex = /^(0[1-9]|[12][0-9]|3[01])[\/\-](0[1-9]|1[0-2])[\/\-](19|20)\d\d$/;
  return dateRegex.test(dateString);
}
console.log(isValidDate("25/12/2024")); // true
console.log(isValidDate("2024-12-25")); // false

Regex eignet sich gut, wenn Sie nur prüfen möchten, ob ein String einem bestimmten Format entspricht. Beachten Sie jedoch, dass JavaScripts eingebauter Date-Konstruktor das Format DD/MM/YYYY nicht nativ verarbeitet. Wenn Sie einen solchen String in ein gültiges Date-Objekt umwandeln möchten, müssen Sie ihn zunächst in YYYY/MM/DD reformatieren:

let dateInput = "15/05/2019"; // DD/MM/YYYY-Format
let dateArray = dateInput.split("/");
let newDate = ${dateArray[2]}/${dateArray[1]}/${dateArray[0]};
console.log(newDate); // 2019/05/15 (YYYY/MM/DD)

Jetzt können Sie newDate sicher mit dem JavaScript-Date-Konstruktor verwenden:

let jsDate = new Date(newDate);
console.log(jsDate); // Gibt ein gültiges Date-Objekt aus

Prüfen, ob ein String ein gültiges Datum in JavaScript ist

Wenn Sie sowohl das Format als auch die kalendarische Gültigkeit prüfen möchten, helfen JavaScripts eingebauter Date-Konstruktor und isNaN():

function isDateValid(dateStr) {
return !isNaN(new Date(dateStr));
}
// DD/MM/YYYY (wird von Date nicht erkannt)
console.log(isDateValid("15/05/2019")); // false
// MM/DD/YYYY
console.log(isDateValid("05/15/2019")); // true
// YYYY/MM/DD
console.log(isDateValid("2019/05/15")); // true

Wann welchen Ansatz verwenden?

• Regex-Validierung eignet sich, um ein bestimmtes Eingabemuster zu erzwingen.

• Date-Objekt-Validierung ist besser, um zu prüfen, ob das Datum tatsächlich existiert und von JavaScript erkannt wird.

Verwenden Sie beide zusammen für strengere Validierung: zuerst das Format mit regex prüfen, dann die Gültigkeit mit dem Konstruktor bestätigen.

Tag- und Jahr-Positionen in Datumsstrings tauschen

Möchten Sie einen Datumsstring von DD/MM/YYYY nach YYYY/MM/DD (oder umgekehrt) konvertieren? Mit einfacher String-Manipulation ist das unkompliziert:

let originalDate = "15/05/2019"; // DD/MM/YYYY
let parts = originalDate.split("/");
// Umgestellt auf YYYY/MM/DD
let convertedDate = ${parts[2]}/${parts[1]}/${parts[0]};
console.log(convertedDate); // Ausgabe: 2019/05/15

Datum in JavaScript als DD/MM/YYYY formatieren

function formatDateToDDMMYYYY(dateInput) {
const dateObj = new Date(dateInput);
if (isNaN(dateObj)) return "Ungültiges Datum";
let day = dateObj.getDate();
let month = dateObj.getMonth() + 1; // Monate sind nullbasiert
const year = dateObj.getFullYear();
day = day < 10 ? "0" + day : day;
month = month < 10 ? "0" + month : month;
return ${day}/${month}/${year};
}
console.log(formatDateToDDMMYYYY("2019/05/15")); // "15/05/2019"

Hinweis: getMonth() gibt Monate nullbasiert zurück (Januar = 0, Dezember = 11), daher muss 1 addiert werden.

Daten mit isNaN() in JavaScript validieren

function isDateValid(dateStr) {
return !isNaN(new Date(dateStr));
}
console.log(isDateValid("15/05/2019")); // false (DD/MM/YYYY wird nicht nativ erkannt)
console.log(isDateValid("05/15/2019")); // true (MM/DD/YYYY ist in JS gültig)
console.log(isDateValid("2019/05/15")); // true (YYYY/MM/DD ebenfalls gültig)

JavaScripts Date-Konstruktor ist bei Formaten wählerisch. Eine Kombination aus regex und isNaN() ermöglicht sowohl die Formatprüfung als auch die Bestätigung, dass JavaScript das Datum akzeptiert.

Daten in JavaScript vergleichen

const firstDate = new Date('2024-06-01');
const secondDate = new Date('2024-06-05');
console.log(firstDate < secondDate); // true
console.log(firstDate > secondDate); // false

JavaScript konvertiert Date-Objekte intern in Millisekunden seit dem 1. Januar 1970, daher funktionieren Vergleichsoperatoren wie <, > direkt. Für Gleichheitsvergleiche verwenden Sie .getTime():

console.log(firstDate.getTime() === secondDate.getTime()); // false

Weitere Muster zum Ausprobieren

ISO 8601 (z. B. 2024-06-05T12:30:00Z):

/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}Z$/

MM-DD-YYYY-Format:

/^(0[1-9]|1[0-2])--\d\d$/

Warum getMonth() in JavaScript anpassen?

Die Methode getMonth() zählt Monate ab null (Januar = 0, Dezember = 11). Um den üblichen 1-12-Bereich anzuzeigen, muss 1 addiert werden:

const date = new Date();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const year = date.getFullYear();
const formattedDate = ${month}-${day}-${year};

Was passiert mit ungültigen Daten im JavaScript-Date-Konstruktor?

Einem ungültigen Datumsstring wird kein Fehler ausgelöst, stattdessen wird ein Invalid Date-Objekt erstellt:

const dateStr = "2019/15/15"; // Monat 15 existiert nicht
const parsedDate = new Date(dateStr);
console.log(parsedDate); // Ausgabe: Invalid Date

Validieren Sie Ihre Eingabe immer, bevor Sie sie an den Date-Konstruktor übergeben.

Prüfen, ob ein Datum in der Vergangenheit oder Zukunft liegt

const inputDate = new Date('2023-08-20');
const today = new Date();
if (inputDate < today) {
console.log('Das Eingabedatum liegt in der Vergangenheit.');
} else {
console.log('Das Eingabedatum liegt in der Zukunft.');
}

Praxisnahe Anwendungsfälle

• Formularvalidierung: Sicherstellen, dass Benutzer gültige Geburtstage, Buchungsdaten oder Fristen in Formularen eingeben.

• Log-Analyse: Gültige Datumsstrings aus Server-Logs extrahieren, zum Beispiel mit dem JavaScript-Regex-Tester.

• Datenbereinigung: Datumsformate in JavaScript-basierten Datenverarbeitungs-Tools standardisieren.

Diese Tools kombinieren

• JavaScript-Regex-Tester - Komplexe Datumsmuster schnell aufbauen und debuggen

• E-Mail-Regex-JavaScript-Validator - Benutzeranmeldedaten zusammen mit Datumseingaben validieren

• IP-Adressen-Regex-JavaScript-Validator - Mit Zeitstempel-Logs für Netzwerkdaten kombinieren

• Passwort-Regex-JavaScript-Validator - Für Kontoerstellungs- oder Anmeldeformulare verwenden

Profi-Tipps

• Verwenden Sie String.prototype.match() oder .test() für schnelle regex-Prüfungen in JavaScript.

• Validieren Sie die Datumslogik immer separat (z. B. ist der 30. Feb. ungültig, auch wenn regex es zulässt).

• Verwenden Sie ISO 8601 für APIs und Datenbankkonsistenz.

• Nutzen Sie nicht-erfassende Gruppen ((?:...)), wenn Sie keine Teile des Treffers extrahieren möchten.

• Kompilieren Sie das regex einmal und verwenden Sie es in Ihren Validierungsfunktionen wieder.