Validierung mehrerer Eingaben

  • geschlossen
  • JavaScript

  • ilTino
  • 2046 Aufrufe 5 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Validierung mehrerer Eingaben

    Hallo zusammen,

    ich bin noch sehr frisch auf dem Feld der Programmierung und mache meine ersten Schritte. Als Startprojekt will ich einen kleinen Online-Shop machen. Dieser soll über eine Registrierung verfügen. Die Eingaben in die jeweiligen Textfelder sollen dabei validiert werden. Mit meinem jetzigen Code lässt sich ein einzelnes Textfeld prüfen. Wenn ich allerdings auf die selbe Art und Weise ein weiteres Textfeld prüfen will, wird plötzlich gar nichts mehr geprüft.

    Wie schaffe ich es, dass ich mehrere Textfelder validieren kann?

    HTML-Quellcode

    1. <html>
    3. <head>
    4. <script language="javascript" type="text/javascript"><!--
    6. function checkFormular() {
    8. // checkt die PLZ
    9. var vPLZ = document.formular.plz.value;
    10. var postleitzahl = /^([0]{1}[1-9]{1}|[1-9]{1}[0-9]{1})[0-9]{3}$/;
    11. var rPLZ = postleitzahl.test(vPLZ);
    12. if(rPLZ == true) {
    13. alert("Die eingegebene PLZ ist korrekt");
    14. return true;
    15. } else {
    16. alert ("Die eingegebene PLZ ist fehlerhaft");
    17. return false;
    18. }
    20. // checkt die eMail
    21. String vMail = document.formular.mail.value;
    22. String mail = /[a-zA-Z0-9_-\.]+@[a-zA-Z0-9\.]+[a-zA-Z]{2,4}/;
    23. String rMail = mail.test(vMail);
    24. if (rMail == true) {
    25. alert ("Die eingegebene eMail-Adresse ist korrekt");
    26. return true;
    27. } else {
    28. alert ("Die eingegebene eMail-Adresse ist fehlerhaft");
    29. return false;
    30. }
    31. }
    32. </script>
    33. </head>
    35. <body>
    36. <form name="formular" onSubmit="return checkFormular()">
    37. <input name="plz" type="text" size="5" maxlength="5"> <br/>
    38. <input name="mail" type="text" size="20" maxlength="20"> <br/>
    39. <input type="submit"> <input type="reset">
    40. </form>
    41. </body>
    Alles anzeigen

  • Hi,
    Funktionen können ein Statement zur Rückgabe enthalten. Dies ist "return". Return gibt ein Wert zurück und bricht die laufende Funktion ab (Wie soll man auch mehrere Werte zurückgeben). Da bei dir in jedem Fall nach der PLZ-Validierung etwas zurückgegeben wird, kommt der mail-Teil nicht mehr dran ;)

    Mehr: JavaScript Functions

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • Array für Java Script Validierung

    Hallo,

    erstmal vielen Dank für die Antwort. Das hat mir schon mal sehr geholfen.

    Ich habe das Konzept auf Grundlage der Antwort und des Links logisch angepasst. Leider ohne positives Ergebnis bisher. Ich will in die Methode nun mehrere Werte mitnehmen. Das mach ich über den Methodenkopf. Ist das überhaupt sinnvoll, oder sollte ich bei dem Statement "var vPLZ = document.formular.plz.value;" bleiben?

    Das Programm validiert momentan gar nicht. Woran liegt das? Wie kann ich die Werte richtig übergeben? Wie kann ich sie in der Methode "anfassen"?

    Hier der aktuelle Code:

    HTML-Quellcode

    1. <html>
    3. <head>
    4. <script language="javascript" type="text/javascript">
    6. function checkFormular(plz, mail) {
    8. // checkt die PLZ
    9. var vPLZ = plz; // document.formular.plz.value;
    10. var postleitzahl = /^([0]{1}[1-9]{1}|[1-9]{1}[0-9]{1})[0-9]{3}$/;
    11. var rPLZ = postleitzahl.test(vPLZ);
    12. if(rPLZ == false) {
    13. alert("Die eingegebene PLZ ist fehlerhaft");
    14. return false;
    15. }
    17. // checkt die eMail
    18. String vMail = mail; // document.formular.mail.value;
    19. String mail = /[a-zA-Z0-9_-\.]+@[a-zA-Z0-9\.]+[a-zA-Z]{2,4}/;
    20. String rMail = mail.test(vMail);
    21. if (rMail == false) {
    22. alert ("Die eingegebene eMail-Adresse ist fehlerhaft");
    23. return false;
    24. }
    26. return true;
    27. }
    28. </script>
    29. </head>
    31. <body>
    32. <form name="formular" onSubmit="return checkFormular()">
    33. <input name="plz" type="text" size="5" maxlength="5"> <br/>
    34. <input name="mail" type="text" size="20" maxlength="20"> <br/>
    35. <input type="submit"> <input type="reset">
    36. </form>
    37. </body>
    Alles anzeigen

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von Broken Sword () aus folgendem Grund: Code-Tag hinzugefügt =&gt; Regeln lesen!

  • Hi,
    wenn du die Variablen übergeben willst, dann musst du das auch machen ;)

    Quellcode

    1. checkFormular(document.formular.plz.value,document.formular.mail.value);
    Aber wenn du nur ein Formular hast, ist das unnötig.
    Außerdem sind ein paar Fehler in deinem Code. Probiere mal:

    Quellcode

    1. function checkFormular() {
    2. // checkt die PLZ
    3. var vPLZ = document.formular.plz.value;
    4. var postleitzahl = /^([0]{1}[1-9]{1}|[1-9]{1}[0-9]{1})[0-9]{3}$/;
    5. var rPLZ = postleitzahl.test(vPLZ);
    6. if(rPLZ == false) {
    7. alert("Die eingegebene PLZ ist fehlerhaft");
    8. return false;
    9. }
    11. // checkt die eMail
    12. var vMail = document.formular.mail.value;
    13. var mail = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    14. var rMail = mail.test(vMail);
    15. if (rMail == false) {
    16. alert ("Die eingegebene eMail-Adresse ist fehlerhaft");
    17. return false;
    18. }
    20. return true;
    21. }
    Alles anzeigen


    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • Sind meine RegEx zur Datenvalidierung korrekt?

    Langsam fängt es an, Spass zu machen. :)

    Erstmal herzlichen Dank. Dein Code läuft problemlos. Jetzt weiß ich schon mal, dass es so laufen kann.

    In meinem jugendlichen Leichtsinn, habe ich nun natürlich auch andere Textfelder hinzugefügt, die validiert werden sollen. Außerdem unterscheide ich z. B. auch in eine deutsche (5-stellig) und in eine österreichische/schweizer (4-stellig) Postleitzahl.

    Resultat ist, dass ich nun alle Felder prüfen kann. Außer die Postleitzahl. Die verträgt meine if-Abfrage leider nicht.

    1. Wo liegt mein Fehler?
    2. Beim Geburtsdatum würde ich auch gerne noch prüfen, ob dieses in der Zukunft liegt (eingegebenes Datum > date() funktioniert leider nicht) und ob es "unlogisch" in der Vergangenheit liegt. Beispielsweise im 14. Jahrhundert. Wie kann ich das einfach und effizient umsetzen?
    3. Mein aktuelles regEx für das Passwort ist noch etwas "unschön". Ich habe zwar drei oder vier gefunden, bei denen die Ersteller von einem sicheren Passwort sprechen, allerdings immer ohne Erklärung. Und verstanden habe ich sie alle nicht :) Falls jemand hierzu also noch etwas nettes hat...

    Hier der aktuelle Code:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <script language="javascript" type="text/javascript">
    5. function checkFormular() {
    7. // checkt den Namen
    8. var vName = document.formular.name.value;
    9. var name = /[a-zA-ZäöüÄÖÜ]+/;
    10. var rName = name.test(vName);
    11. if (rName == false) {
    12. alert ("Die eingegebene Nachname ist fehlerhaft");
    13. return false;
    14. }
    16. // checkt den Vornamen
    17. var vVorname = document.formular.vorname.value;
    18. var vorname = /[a-zA-ZäöüÄÖÜ]+/;
    19. var rVorname = vorname.test(vVorname);
    20. if (rVorname == false) {
    21. alert ("Die eingegebene Vorname ist fehlerhaft");
    22. return false;
    23. }
    25. // checkt die eMail-Adresse
    26. var vMail = document.formular.mail.value;
    27. var mail = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    28. var rMail = mail.test(vMail);
    29. if (rMail == false) {
    30. alert ("Die eingegebene eMail-Adresse ist fehlerhaft");
    31. return false;
    32. }
    34. // checkt das Geburtsdatum
    35. var vDatum = document.formular.gdatum.value;
    36. // aktuellesDatum = date();
    37. var datum = /[0-9]{4}-[0-9]{2}-[0-9]{2}/;
    38. var rDatum = datum.test(vDatum);
    39. if (rDatum == false) {
    40. alert ("Das eingegebene Geburtsdatum ist fehlerhaft");
    41. return false;
    42. }
    44. // checkt den Nickname
    45. var vNickname = document.formular.nickname.value;
    46. var nickname = /[a-zA-ZäöüÄÖÜ]+/;
    47. var rNickname = nickname.test(vNickname);
    48. if (rNickname == false) {
    49. alert ("Der eingegebene Nickname entspricht nicht den erlaubten Konventionen");
    50. return false;
    51. }
    53. // checkt das Passwort
    54. var vPasswort = document.formular.passwort.value;
    55. var passwort = /[a-zA-Z]{4,10}/;
    56. var rPasswort = passwort.test(vPasswort);
    57. if (rPasswort == false) {
    58. alert ("Das eingegebene Passwort entspricht nicht den erlaubten Konventionen. Das Passwort muss zwischen vier und zehn alphabetische Zeichen haben.");
    59. return false;
    60. }
    62. // checkt die Straße
    63. var vStrasse = document.formular.strasse.value;
    64. var strasse = /[a-zA-ZäöüÄÖÜ \.]+/;
    65. var rStrasse = strasse.test(vStrasse);
    66. if (rStrasse == false) {
    67. alert ("Die eingegebene Straße ist fehlerhaft");
    68. return false;
    69. }
    71. // checkt die Hausnummer
    72. var vHausnummer = document.formular.hausnummer.value;
    73. var hausnummer = /[0-9]+[a-zA-Z]?/;
    74. var rHausnummer = hausnummer.test(vHausnummer);
    75. if (rHausnummer == false) {
    76. alert ("Die eingegebene Hausnummer entspricht nicht den zulässigen Konventionen");
    77. return false;
    78. }
    80. // checkt die PLZ
    81. var postleitzahl = document.formular.plz.value;
    82. var vLand = document.formular.land.value;
    83. if (vLand == 1) { // Der Wert "1" steht für Deutschland
    84. postleitzahl = /^([0]{1}[1-9]{1}|[1-9]{1}[0-9]{1})[0-9]{3}$/;
    85. var rPLZ = postleitzahl.test(vPLZ);
    86. if(rPLZ == false) {
    87. alert("Die eingegebene PLZ ist fehlerhaft");
    88. return false;
    89. } else {
    90. postleitzahl = /^\d{4}$/;
    91. var rPLZ = postleitzahl.test(vPLZ);
    92. if(rPLZ == false) {
    93. alert("Die eingegebene PLZ ist fehlerhaft");
    94. return false;
    95. }
    96. }
    97. }
    99. // wenn keiner der Checks "false" ist, dann gib "true" zurück
    100. return true;
    102. }
    103. </script>
    105. <title>Registrierung</title>
    106. </head>
    107. <body>
    109. <form name="formular" onSubmit="return checkFormular()">
    110. Name*: <input type="text" name="name" maxlength=50 /><br/>
    111. Vorname*: <input type="text" name="vorname" maxlength=50 /><br/>
    112. Email*: <input type="text" name="mail" maxlength=50 /><br/>
    113. Geburtsdatum*: <input type="text" name="gdatum" size=10 maxlength=10 /> ( JJJJ-MM-TT ) <br/>
    114. Nickname*: <input type="text" name="nickname" maxlength=50 /><br/>
    115. Passwort*: <input type="password" name="passwort" maxlength=50 /><br/>
    116. Straße*: <input type="text" name="strasse" maxlength=50 />
    117. Hausnummer*: <input type="text" name="hausnummer" size=3 maxlength=10 /><br/>
    118. PLZ*: <input type="text" name="plz" size=5 maxlength=5 /><br/>
    119. Land*: <select name="land">
    120. <option value="1" selected>Deutschland</option>
    121. <option value="2">Österreich</option>
    122. <option value="3">Schweiz</option>
    123. </select>
    124. <p>
    125. <input type="submit">
    126. </p>
    127. </form>
    129. <p>
    130. * Pflichtfelder
    131. </p>
    132. </body>
    133. </html>
    Alles anzeigen

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von ilTino () aus folgendem Grund: Flüchtigkeitsfehler im HTML :-)

  • du hast das else bei der PLZ-Überprüfung an die falsche Stelle gepackt.

    müsste so aussehen:

    Quellcode

    1. if (vLand == 1) { // Der Wert "1" steht für Deutschland
    2. postleitzahl = /^([0]{1}[1-9]{1}|[1-9]{1}[0-9]{1})[0-9]{3}$/;
    3. var rPLZ = postleitzahl.test(vPLZ);
    4. if(rPLZ == false) {
    5. alert("Die eingegebene PLZ ist fehlerhaft");
    6. return false;
    7. }
    8. }else {
    9. postleitzahl = /^\d{4}$/;
    10. var rPLZ = postleitzahl.test(vPLZ);
    11. if(rPLZ == false) {
    12. alert("Die eingegebene PLZ ist fehlerhaft");
    13. return false;
    14. }
    15. }
    Alles anzeigen


    fürs Geburtsdatum würden sich UNIX timestamps anbieten. Die kann man direkt miteinander vergleichen.
    "General, der Mensch ist sehr brauchbar. Er kann fliegen und er kann töten.
    Aber er hat einen Fehler: Er kann denken." - Brecht
    I Don't smoke, I don't drink, I don't fuck! At least I can fucking think!