Fertig zum Testen.

master_stand_10_05_23
Jasmin Weise 2023-05-17 13:16:27 +02:00
parent 546d0ec97e
commit 65576fe8cc
2 changed files with 164 additions and 100 deletions

View File

@ -167,7 +167,7 @@
</div> </div>
</footer> </footer>
<script src="registrierungVerhalten.js"></script> <script src="registrierung_verhalten.js"></script>
</body> </body>

View File

@ -1,5 +1,4 @@
// TODO: Aufräumen // TODO: Aufräumen
// TODO: Meldungen spezifizieren
// Großbuchstaben -> [A-Z] // Großbuchstaben -> [A-Z]
// Kleinbuchstaben -> [a-z] // Kleinbuchstaben -> [a-z]
@ -147,7 +146,8 @@ function checkFirstName() {
return false; return false;
} }
// Fehlermeldung Groß- und Kleinschreibung // Fehlermeldung Groß- und Kleinschreibung
else if (!(/^[A-ZÄÖÜ][a-zäöüß]+([- ][A-ZÄÖÜ][a-zäöüß]+)*$/.test(firstName.value))) { else if (!(/^[A-ZÄÖÜ][a-zäöüß]+([- ][A-ZÄÖÜ][a-zäöüß]+)*$/
.test(firstName.value))) {
showErrorMessage(firstName, 0, showErrorMessage(firstName, 0,
"Jeder Teil eines Vornamens " "Jeder Teil eines Vornamens "
+ "muss mit einem Großbuchstaben beginnen. " + "muss mit einem Großbuchstaben beginnen. "
@ -268,7 +268,7 @@ function checkLastName() {
} }
/** /**
* Ein Straßenname kann aus Buchstaben (Basis-Lateinisch und Umlaute), Ziffern * Ein Straßenname kann aus Buchstaben (inlusive Umlaute), Ziffern
* oder einer Mischung aus beidem bestehen. * oder einer Mischung aus beidem bestehen.
* Auch Apostrophen und das scharfe S können im Namen vorkommen, * Auch Apostrophen und das scharfe S können im Namen vorkommen,
* stehen aber nie am Anfang. * stehen aber nie am Anfang.
@ -281,15 +281,16 @@ function checkLastName() {
// Laehr'scher Jagdweg -> Keine Fehlermeldung // Laehr'scher Jagdweg -> Keine Fehlermeldung
// A 3 -> Keine Fehlermeldung -> Keine Fehlermeldung // A 3 -> Keine Fehlermeldung -> Keine Fehlermeldung
// A3 -> Keine Fehlermeldung // A3 -> Keine Fehlermeldung
// -> Fehlermeldung Leeres Feld
// -> Fehlermeldung Leeres Feld
// Frießenstr. -> Fehlermeldung Erlaubte Zeichen // Frießenstr. -> Fehlermeldung Erlaubte Zeichen
// D -> Fehlermeldung Anzahl Zeichen // D -> Fehlermeldung Anzahl Zeichen
// 1234 -> Fehlermeldung Ziffern // 1234 -> Fehlermeldung Ziffern
// Fri3senstraße -> Fehlermeldung Ziffern
// kurt-Romstöck-Ring -> Fehlermeldung Groß- und Kleinschreibung // kurt-Romstöck-Ring -> Fehlermeldung Groß- und Kleinschreibung
// Rue de Saint-Germain-lès-Corbeil -> Fehlermeldung Erlaubte Zeichen // Rue de Saint-Germain-lès-Corbeil -> Fehlermeldung Erlaubte Zeichen
// Musterstraße' -> Fehlermeldung Letztes Zeichen
function checkStreetName() { function checkStreetName() {
var regex_streetName
= /^[A-ZÄÖÜ][ -]?[a-zäöü0-9ß']*([ -]?[A-Za-z0-9ÄÖÜäöüß][A-Za-z0-9ÄÖÜäöüß']*)+$/;
var streetName = document.getElementById("strasse"); var streetName = document.getElementById("strasse");
// Fehlermeldung Leeres Feld // Fehlermeldung Leeres Feld
if (!(checkIfElementHasValue(streetName))) { if (!(checkIfElementHasValue(streetName))) {
@ -304,18 +305,13 @@ function checkStreetName() {
return false; return false;
} }
// Fehlermeldung Ziffern // Fehlermeldung Ziffern
else if (/^[0-9]/.test(streetName.value)) { else if (!(/^[^0-9]*$|[0-9]$/.test(streetName.value))) {
showErrorMessage(streetName, 0, showErrorMessage(streetName, 0,
"Ein Straßenname darf nicht mit einer Ziffer beginnen."); "Ziffern und Zahlen dürfen nur am Ende des Straßennamens stehen.");
return false; return false;
} }
// Fehlermeldung Groß- und Kleinschreibung
else if (!(/^[A-ZÄÖÜ][ -]?[a-zäöü0-9ß']*([ -]?[A-Za-z0-9ÄÖÜäöüß][A-Za-z0-9ÄÖÜäöüß']*)+$/).test(streetName.value)) {
showErrorMessage(streetName, 0,
"Jeder Teil des Straßennamens muss mit einem Großbuchstaben beginnen.");
}
// Fehlermeldung Erlaubte Zeichen // Fehlermeldung Erlaubte Zeichen
else if (!(/^[A-Za-z0-9ÄÖÜäöüß' -.]+$/.test(streetName.value))) { else if (!(/^[A-Za-z0-9ÄÖÜäöüß' -]+$/.test(streetName.value))) {
showErrorMessage(streetName, 0, showErrorMessage(streetName, 0,
"Ein Straßenname darf nur aus Groß- und Kleinbuchstaben, " "Ein Straßenname darf nur aus Groß- und Kleinbuchstaben, "
+ "Umlauten, Eszett, Ziffern, Bindestrichen " + "Umlauten, Eszett, Ziffern, Bindestrichen "
@ -323,6 +319,21 @@ function checkStreetName() {
+ "dass alle Abkürzungen ausgeschrieben sind."); + "dass alle Abkürzungen ausgeschrieben sind.");
return false; return false;
} }
// Fehlermeldung Groß- und Kleinschreibung
else if (!(/^[A-ZÄÖÜ][ -]?[a-zäöü0-9ß']+([ -]?[A-ZÄÖÜ0-9][A-Za-z0-9ÄÖÜäöüß']+)*$/)
.test(streetName.value)) {
showErrorMessage(streetName, 0,
"Jeder Teil des Straßennamens muss "
+ "mit einem Großbuchstaben beginnen.");
return false;
}
// Fehlermeldung Letztes Zeichen
else if (!(/[0-9]$|[a-zäöüß]$/.test(streetName.value))) {
showErrorMessage(streetName, 0,
"Ein Straßenname kann nur mit einer Ziffer "
+ "oder einem Kleinbuchstaben enden.");
return false;
}
else { else {
removeErrorMessage(streetName, 0); removeErrorMessage(streetName, 0);
return true; return true;
@ -333,36 +344,46 @@ function checkStreetName() {
* Eine Hausnummer kann aus Ziffern und maximal einem Kleinbuchstaben bestehen. * Eine Hausnummer kann aus Ziffern und maximal einem Kleinbuchstaben bestehen.
* Jede Hausnummer beginnt mit mindestens einer Ziffer. * Jede Hausnummer beginnt mit mindestens einer Ziffer.
*/ */
// 54 // Beispiele zum Testen:
// 2a // 54 -> Keine Fehlermeldung
// 2a -> Keine Fehlermeldung
// -> Fehlermeldung Leeres Feld
// -> Fehlermeldung Leeres Feld
// a3 -> Fehlermeldung Erstes Zeichen
// 2A -> Fehlermeldung Syntax
// 2ab -> Fehlermeldung Syntax
// 12345 -> Fehlermeldung Syntax
// 0 -> Fehlermeldung Führende Null
function checkHouseNumber() { function checkHouseNumber() {
var regex_houseNumber = /^[0-9]+[a-z]?$/;
var houseNumber = document.getElementById("hausNummer"); var houseNumber = document.getElementById("hausNummer");
// Fehlermeldung Leeres Feld
if (!(checkIfElementHasValue(houseNumber))) { if (!(checkIfElementHasValue(houseNumber))) {
houseNumber.style.border = "2px solid #F22C2C" showErrorMessage(houseNumber, 1,
var classOfInputField = houseNumber.parentElement; "Bitte füllen Sie das Feld Hausnummer aus.");
var errorMessage = classOfInputField.getElementsByTagName('p')[1];
errorMessage.innerHTML = "Bitte füllen Sie das Feld Hausnummer aus.";
errorMessage.style.display = "block";
return false; return false;
} }
else if (!(regex_houseNumber.test(houseNumber.value))) { // Fehlermeldung Erstes Zeichen
houseNumber.style.border = "2px solid #F22C2C" else if (!(/^[0-9]/.test(houseNumber.value))) {
var classOfInputField = houseNumber.parentElement; showErrorMessage(houseNumber, 1,
var errorMessage = classOfInputField.getElementsByTagName('p')[1]; "Eine Hausnummer muss mit einer Ziffer beginnen.");
errorMessage.innerHTML return false;
= "Bitte geben Sie eine gültige Hausnummer ein, " }
+ "welche aus Ziffern und maximal einem Kleinbuchstaben " // Fehlermeldung Führende Null
+ "am Ende der Hausnummer besteht."; else if (/^0/.test(houseNumber.value)) {
errorMessage.style.display = "block"; showErrorMessage(houseNumber, 1,
"Eine Hausnummer kann nicht mit einer Null beginnen.");
return false;
}
// Fehlermeldung Syntax
else if (!(/^[1-9][0-9]{0,3}[a-z]?$/.test(houseNumber.value))) {
showErrorMessage(houseNumber, 1,
"Bitte geben Sie eine gültige Hausnummer ein, "
+ "welche aus maximal fünf Ziffern und maximal "
+ "einem Kleinbuchstaben am Ende der Hausnummer besteht.");
return false; return false;
} }
else { else {
houseNumber.style.border = "2px solid #70AD47" removeErrorMessage(houseNumber, 1);
var classOfInputField = houseNumber.parentElement;
var errorMessage = classOfInputField.getElementsByTagName('p')[1];
errorMessage.innerHTML = "";
errorMessage.style.display = "none";
return true; return true;
} }
} }
@ -371,79 +392,117 @@ function checkHouseNumber() {
* Eine Postleitzahl besteht aus einer Reihe von fünf Ziffern. * Eine Postleitzahl besteht aus einer Reihe von fünf Ziffern.
* Die kleinste mögliche Postzahl ist 01001. * Die kleinste mögliche Postzahl ist 01001.
*/ */
// 67547 // Beispiele zum Testen:
// 08123 // 67547 -> Keine Fehlermeldung
// 08123 -> Keine Fehlermeldung
// -> Fehlermeldung Leeres Feld
// -> Fehlermeldung Leeres Feld
// 00000 -> Fehlermeldung Syntax
function checkPLZ() { function checkPLZ() {
// TODO: Regex Postleitzahl anpassen.
var regex_plz = /^(0100[1-9]|010[1-9][0-9]|01[1-9][0-9]{2}|0[2-9][0-9]{3}|[1-9][0-9]{4})$/;
var plz = document.getElementById("postleitzahl"); var plz = document.getElementById("postleitzahl");
// Fehlermeldung Leeres Feld
if (!(checkIfElementHasValue(plz))) { if (!(checkIfElementHasValue(plz))) {
plz.style.border = "2px solid #F22C2C" showErrorMessage(plz, 0,
var classOfInputField = plz.parentElement; "Bitte füllen Sie das Feld Postleitzahl aus.");
var errorMessage = classOfInputField.getElementsByTagName('p')[0];
errorMessage.innerHTML = "Bitte füllen Sie das Feld Postleitzahl aus.";
errorMessage.style.display = "block";
return false; return false;
} }
else if (!(regex_plz.test(plz.value))) { // Fehlermeldung Syntax
plz.style.border = "2px solid #F22C2C" else if (!(/^(0100[1-9]|010[1-9][0-9]|01[1-9][0-9]{2}|0[2-9][0-9]{3}|[1-9][0-9]{4})$/
var classOfInputField = plz.parentElement; .test(plz.value))) {
var errorMessage = classOfInputField.getElementsByTagName('p')[0]; showErrorMessage(plz, 0,
errorMessage.innerHTML "Bitte geben Sie eine gültige Postleitzahl ein, "
= "Bitte geben Sie eine gültige Postleitzahl ein, " + "welche aus fünf Ziffern besteht. "
+ "welche aus fünf Ziffern besteht."; + "Die kleinste gültige Postleitzahl ist 01001.");
errorMessage.style.display = "block";
return false; return false;
} }
else { else {
plz.style.border = "2px solid #70AD47" removeErrorMessage(plz, 0);
var classOfInputField = plz.parentElement;
var errorMessage = classOfInputField.getElementsByTagName('p')[0];
errorMessage.innerHTML = "";
errorMessage.style.display = "none";
return true; return true;
} }
} }
/** /**
* Ein Stadtname besteht aus Buchstaben (Basis-Lateinisch und Umlaute), * Ein Stadtname besteht aus Buchstaben (inklusive Umlaute und Eszett),
* kann mehrere Teile haben und beginnt immer mit einem Großbuchstaben. * kann mehrere Teile haben und beginnt immer mit einem Großbuchstaben.
* Die einzelnen Teile können durch ein Leerzeichen, einen Bindestrich, * Die einzelnen Teile können durch ein Leerzeichen, einen Bindestrich,
* oder einen Schrägstrich getrennt und bei Abkürzungen mit einem Punkt * oder einen Schrägstrich getrennt werden.
* abgeschlossen werden.
*/ */
// Beispiele zum Testen: // Beispiele zum Testen:
// Füssen // Füssen -> Keine Fehlermeldung
// Frankenberg/Sa. // Frankenberg/Sachsen -> Keine Fehlermeldung
// Eschenbach in der Oberpfalz // Eschenbach in der Oberpfalz -> Keine Fehlermeldung
// Auma-Weidatal // Auma-Weidatal -> Keine Fehlermeldung
// Gießen // Gießen -> Keine Fehlermeldung
// St. Ingbert // -> Fehlermeldung Leeres Feld
// -> Fehlermeldung Leeres Feld
// St. Ingbert -> Fehlermeldung Erlaubte Zeichen
// Auma--Weidatal -> Fehlermeldung Aufeinanderfolgende Sonderzeichen
// Frankenberg/ Sachsen -> Fehlermeldung Aufeinanderfolgende Sonderzeichen
// Füsssen -> Fehlermeldung Aufeinanderfolgende Gleiche Zeichen
// S -> Fehlermeldung Anzahl Zeichen
// Auma-weidatal -> Fehlermeldung Groß- und Kleinschreibung
// füssen -> Fehlermeldung Großschreibung Anfang
// FüSsen -> Fehlermeldung Groß- und Kleinschreibung
// Auma- -> Fehlermeldung Letztes Zeichen
function checkCity() { function checkCity() {
const regex_city = /^[A-ZÄÖÜ][a-zäöüß]*([.]?[ -/][A-ZÄÖÜa-zäöüß]*)*$/;
var city = document.getElementById("ort"); var city = document.getElementById("ort");
// Fehlermeldung Leeres Feld
if (!(checkIfElementHasValue(city))) { if (!(checkIfElementHasValue(city))) {
city.style.border = "2px solid #F22C2C" showErrorMessage(city, 1,
var classOfInputField = city.parentElement; "Bitte füllen Sie das Feld Ort aus.");
var errorMessage = classOfInputField.getElementsByTagName('p')[1];
errorMessage.innerHTML = "Bitte füllen Sie das Feld Ort aus.";
errorMessage.style.display = "block";
return false; return false;
} }
else if (!(regex_city.test(city.value))) { // Fehlermeldung Anzahl Zeichen
city.style.border = "2px solid #F22C2C" else if (!(/.{2,}/.test(city.value))) {
var classOfInputField = city.parentElement; showErrorMessage(city, 1,
var errorMessage = classOfInputField.getElementsByTagName('p')[1]; "Ein Ortsname muss aus mindestens zwei Zeichen bestehen.");
errorMessage.innerHTML = "Bitte geben Sie einen gültigen Ort ein."; return false;
errorMessage.style.display = "block"; }
// Fehlermeldung Aufeinanderfolgende Sonderzeichen
else if (/[ \/-][ \/-]/.test(city.value)) {
showErrorMessage(city, 1,
"Mehrere Sonderzeichen dürfen nicht nebeneinander stehen.");
return false;
}
// Fehlermeldung Erlaubte Zeichen
else if (!(/^[A-ZÄÖÜa-zäöüß \/-]+$/.test(city.value))) {
showErrorMessage(city, 1,
"Ein Ortsname kann nur aus Groß- und Kleinbuchstaben, "
+ "inklusive Umlauten und Eszett bestehen. "
+ "Mehrteilige Ortsnamen können mit einem Leerzeichen, Bindestrich "
+ "oder Schrägstrich getrennt werden. Bitte stellen Sie außerdem "
+" sicher, dass alle Abkürzungen ausgeschrieben sind.")
return false;
}
// Fehlermeldung Aufeinanderfolgende Gleiche Zeichen
else if (/(\w)\1{2,}/.test(city.value)) {
showErrorMessage(city, 1,
"Es dürfen nicht mehr als zwei gleiche Buchstaben "
+ "nebeneinander stehen.");
return false;
}
// Fehlermeldung Großschreibung Anfang
else if (!(/^[A-ZÄÖÜ]/.test(city.value))) {
showErrorMessage(city, 1,
"Ein Ortsname muss mit einem Großbuchstaben beginnen.");
return false;
}
// Fehlermeldung Letztes Zeichen
else if (!(/[a-zäöüß]$/.test(city.value))) {
showErrorMessage(city, 1,
"Ein Ortsname kann nur mit einem Kleinbuchstaben enden.");
return false;
}
// Fehlermeldung Groß- und Kleinschreibung
else if (!(/^[A-ZÄÖÜ][a-zäöüß]+([ -\/][A-ZÄÖÜa-zäöü][a-zäöüß]+)*$/)
.test(city.value)) {
showErrorMessage(city, 1,
"Großbuchstaben können nur am Anfang des Ortsnamens oder, "
+ "bei mehrteiligen Ortsnamen, am Anfang eines Teilnamens stehen.");
return false; return false;
} }
else { else {
city.style.border = "2px solid #70AD47" removeErrorMessage(city, 1);
var classOfInputField = city.parentElement;
var errorMessage = classOfInputField.getElementsByTagName('p')[1];
errorMessage.innerHTML = "";
errorMessage.style.display = "none";
return true; return true;
} }
} }
@ -468,16 +527,18 @@ function checkCity() {
* Die Top-Level-Domain besteht aus mindestens zwei Zeichen. * Die Top-Level-Domain besteht aus mindestens zwei Zeichen.
* *
*/ */
// Beispiele zum Testen:
// MaxMustermann@email.de -> Keine Fehlermeldung
// Max!#.Mustermann@email9.com -> Keine Fehlermeldung
function checkEmailAddress() { function checkEmailAddress() {
const regex_emailAddress = /[A-Za-z_]+[@][A-Za-z]+[.][A-Za-z]{2,}/; const regex_emailAddress = /[A-Za-z0-9_!#$%&'*+-\/=?^_`.{|}~]+[@][A-Za-z0-9-]+[.][A-Za-z]{2,}/;
var emailAddress = document.getElementById("email"); var emailAddress = document.getElementById("email");
if (!(checkIfElementHasValue(emailAddress))) { if (!(checkIfElementHasValue(emailAddress))) {
showErrorMessage(emailAddress, "Bitte füllen Sie das Feld aus.") showErrorMessage(emailAddress, 0, "Bitte füllen Sie das Feld aus.");
return false; return false;
} }
else if (!(regex_emailAddress.test(emailAddress.value))) { else if (!(regex_emailAddress.test(emailAddress.value))) {
showErrorMessage showErrorMessage(emailAddress, 0, "Bitte geben Sie eine gültige E-Mail-Addresse ein, welche die Form 'lokalerTeil@domainteil.topLevelDomain' hat. Erlaubte Zeichen sind Groß- und Kleinbuchstaben, Ziffern und Sonderzeichen.");
(emailAddress, "Bitte geben Sie eine gültige E-Mail-Addresse ein.");
return false; return false;
} }
else { else {
@ -520,20 +581,23 @@ function checkPassword() {
var regex_password = /^(?=.*[A-ZÄÖÜ])(?=.*[a-zäöüß])(?=.*[0-9])(?=.*[!°`´@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{6,}$/; var regex_password = /^(?=.*[A-ZÄÖÜ])(?=.*[a-zäöüß])(?=.*[0-9])(?=.*[!°`´@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{6,}$/;
var password = document.getElementById("passwort"); var password = document.getElementById("passwort");
if (!(checkIfElementHasValue(password))) { if (!(checkIfElementHasValue(password))) {
showErrorMessage(password, "Bitte füllen Sie das Feld aus.") showErrorMessage(password, 0, "Bitte füllen Sie das Feld aus.")
return false; return false;
} }
// Fehlermeldung Anzahl Zeichen
else if (!(/.{6,}/.test(password))) {
showErrorMessage(password, 0,
"Ihr Passwort muss eine Länge von mindestens sechs Zeichen haben.");
}
else if (!(regex_password.test(password.value))) { else if (!(regex_password.test(password.value))) {
showErrorMessage(password, showErrorMessage(password, 0,
"Bitte geben Sie ein gültiges Passwort ein, " "Ihr Passwort muss mindestens einen "
+ "welches aus mindestens sechs Zeichen besteht." + "Groß- und Kleinbuchstaben (inklusive Umlaute und Eszett), "
+ "Außerdem muss das Passwort mindestens einen "
+ "Groß- und Kleinbuchstaben (Basis-Lateinisch und Umlaute), "
+ "eine Ziffer und ein Sonderzeichen enthalten."); + "eine Ziffer und ein Sonderzeichen enthalten.");
return false; return false;
} }
else { else {
removeErrorMessage(password); removeErrorMessage(password, 0);
return true; return true;
} }
} }
@ -545,17 +609,17 @@ function checkRepeat_Password() {
var password = document.getElementById("passwort"); var password = document.getElementById("passwort");
var repeatPassword = document.getElementById("passwortRep"); var repeatPassword = document.getElementById("passwortRep");
if (!(checkIfElementHasValue(repeatPassword))) { if (!(checkIfElementHasValue(repeatPassword))) {
showErrorMessage(repeatPassword, "Bitte füllen Sie das Feld aus.") showErrorMessage(repeatPassword, 0, "Bitte füllen Sie das Feld aus.")
return false; return false;
} }
else if (repeatPassword.value != password.value) { else if (repeatPassword.value != password.value) {
showErrorMessage(repeatPassword, showErrorMessage(repeatPassword, 0,
"Bitte stellen Sie sicher, " "Bitte stellen Sie sicher, "
+ "dass die Passwörter miteinander übereinstimmen."); + "dass die Passwörter miteinander übereinstimmen.");
return false; return false;
} }
else { else {
removeErrorMessage(repeatPassword); removeErrorMessage(repeatPassword, 0);
return true; return true;
} }
} }
@ -579,7 +643,7 @@ function checkForPossibleSubmit() {
if (firstName && lastName && streetName && houseNumber && plz && city && if (firstName && lastName && streetName && houseNumber && plz && city &&
emailAddress && repeatEmailAddress && password && repeatPassword) { emailAddress && repeatEmailAddress && password && repeatPassword) {
// TODO: Formular submitten. // TODO: Formular submitten.
window.location.replace("registrierungErfolgreich.html"); window.location.replace("registrierung_erfolgreich.html");
} }
else else