Wiki-Quellcode von Validatoren

Zeige letzte Bearbeiter
1 {{content/}}
2
3 {{figure image="designer_validators_datatypes_de.png"}}
4 Viele häufig gebrauchte Datentypen stehen zur Auswahl und können direkt genutzt werden. Es ist aber auch möglich, eigene Datentypen und Validatoren per Regexp, JavaScript oder über Plugins zu definieren.
5 {{/figure}}
6
7 Textfelder können beliebigen frei eingebbaren Text enthalten. Oft sind aber nur bestimmte Werte erlaubt, etwa wenn eine E-Mail-Adresse oder Telefonnummer eingegeben werden muss. Um den Nutzer beim Ausfüllen des Formulars zu unterstützen und ihn früzeitig auf fehlerhafte Eingaben aufmerksam zu machen, können Validatoren an Textfelder gehangen werden.
8
9 == Eingebaute Validatoren ==
10
11 Für viele oft verwendete Datentypen stehen bereits fertige Validator in {{formcycle/}} zur Verfügung. Diese werden rechts im Eigenschaftsbereich unter Bedingungen eingestellt.
12
13 Wird ein Formular in mehreren Sprache erstellt, sollen sicherlich auch die Fehlermeldungen in die einzelnen Sprache übersetzt werden. Die Fehlertexte für die eingebauten Validatoren können im [[i18n-Template>>doc:Formcycle.UserInterface.FilesAndTemplates.I18nVariables]] eingesehen und bearbeitet werden.
14
15 Folgende Validatoren stehen zur Verfügung:
16
17 {{table dataTypeAlpha="0-1" preSort="1-asc" colWidth="150-150-400"}}
18 |=Name|= XM_FORM_VRULES|= Beschreibung
19 |Text|-|Standardeinstellung. Die Eingabe wird nicht validiert. Alle Zeichen sind erlaubt.
20 |Buchstaben & Leerzeichen|onlyLetterSp|Es sind nur Buchstaben (UTF-8) und Leerzeichen erlaubt. Die Eingabe von landesspezifischen Sonderzeichen (z.B. öäü) ist erlaubt!
21 |Buchstaben, Zahlen und Leerzeichen|onlyLetterNumber|Es sind nur Buchstaben (UTF-8), Zahlen und Leerzeichen erlaubt. Die Eingabe von landesspezifischen Sonderzeichen (z.B. öäü) ist erlaubt!
22 |Ganzzahl|integer|Es sind nur Zahlen - ohne Punkt und Komma - erlaubt. (z.B. 100 oder -100)
23 |Positive Ganzzahl|posinteger|Es sind nur positive Zahlen - ohne Punkt und Komma - erlaubt. (z.B. 100)
24 |Zahl|number|Es sind nur Zahlen - ohne Punkt jedoch mit Komma - erlaubt. (z.B. 100 oder -100 oder 100,10 ...)
25 |Geldbetrag|money|Geldbetrag ohne Tausendertrennziechen aber mit Nachkommastellen. (z.B. 100,00)
26 |Positiver Geldbetrag|posmoney|Positiver Geldbetrag ohne Tausendertrennziechen aber mit Nachkommastellen. (z.B. 100,00)
27 |Positiver Geldbetrag (opt. Nachkomma)|posmoneyOptionalComma|Positiver Geldbetrag ohne Tausendertrennziechen mit optionalen Nachkommastellen. (z.B. 100,00)
28 |E-Mail|email|E-Mail Validator ([[internationale E-Mailadresse>>url:https://en.wikipedia.org/wiki/International_email]],[[eai>>url:http://tools.ietf.org/wg/eai/]])
29 |Datum (DD.MM.YYYY)|datumDE|Datum-Validator der das Datum auf die Syntax "DD.MM.YYYY" prüft. (z.B. 01.01.2015)
30 |Uhrzeit|time|Prüft die Eingabe auf das Format "mm:hh". (z.B. 01:30 oder 13:30)
31 |Postleitzahl (Deutschland)|plzDE|Prüft die Syntax einer deutschen Postleitzahl. (5 Zahlen)
32 |Telefonnummer|phone|Telefonnummer (z.B. +49 351 810 500 oder 0049-351-810-500 oder 0049/351/810/500)
33 |URL|url|URL (z.B. http:~/~/www.xima.de oder https:~/~/www.xima.de oder ftp:~/~/ftp.xima.de)
34 |IP Adresse|ipv4|IP V4 Adresse (z.B. 127.0.0.1 oder 192.168.0.255~)
35 |Regular expression|-|Erlaubt die Verwendung einer eigenen RexExp zur Validierung. Ist dieser Datentyp ausgewählt, kann die zu nutzende RegExp und eine Fehlernachricht eingegeben werden. Zudem kann die Fehlernachricht auch [[in andere Sprachen übersetzt werden>>doc:Formcycle.FormDesigner.Internationalization]]. Die RegExp wird als JavaScript RegExp ausgewerted, diese sind näher beschrieben unter [[mozilla.org>>url:https://developer.mozilla.org/de/docs/Web/JavaScript/Guide/Regular_Expressions]].
36 {{/table}}
37
38 == Regexp-Datentyp ==
39
40 {{figure image="designer_validators_regexp_de.png" width="500"}}
41 Wird als Datentyp //regulärer Ausdruck// ausgewählt, kann eine eigene Regexp für die Validierung verwendet werden. Zudem kann auch ein Fehlertext eingegeben werden.
42 {{/figure}}
43
44 Ist der Datentyp //regexp// ausgewählt, kann eine eigene Regexp für die Validierung des Textfelds eingegeben werden. Wenn die Regexp auf den aktuellen Wert des Textfelds passt, wird es also gültig betrachtet. Andernfalls wird die eingestellte Fehlernachricht angezeigt. Die Regexp wird als JavaScript Regexp ausgewertet und muss ohne den Schrägstrich ({{{/}}}) am Anfang und Ende eingegeben werden.
45
46 Im folgenden einfachen Beispiel wird geprüft, dass wenigstens eines der Wörter //Apfel// oder //Bananen// vorkommen.
47
48 {{code language="none"}}
49 \b(Apfel|Banane)\b
50 {{/code}}
51
52 In den meisten Fällen will man aber gegen den ganzen Wert des Textfelds prüfen. In diesem Fall müssen die Anker //^// (passt auf den Anfang) und //$// (passt auf das Ende) benutzt werden:
53
54 {{code language="none"}}
55 ^[a-zA-Z][a-zA-Z\d]{3,15}$
56 {{/code}}
57
58 Die obige Regexp prüft auf gültige Nutzernamen, die 4 bis 16 Zeichen lang sein müssen, nur Buchstaben und Zahlen enthalten dürfen sowie mit einem Buchstaben anfangen müssen.
59
60 == Serverseitige Validierung ==
61
62 {{figure image="designer_validators_server_side_de.png"}}
63 Durch Aktivierung der serverseitigen Validierung werden die Daten zusätzlich vom Server geprüft, um Manipulationen ausschließen zu können.
64 {{/figure}}
65
66 Standardmäßig werden die Daten nur clientseitig im Browser des Nutzers mittels JavaScript validiert. Dies bedeutet, dass jemand mit nötigen technischen Fachkenntnissen etwa ein Formular absenden kann, was eine ungültige E-Mail-Adresse enthält. Wenn es erforderlich ist, sicherzustellen, dass Nutzer keine ungültigen Daten einreichen können, kann die serverseitige Validierung aktiviert werden. Nach dem Absenden werden dann die Daten auf dem Server geprüft. Sind diese ungültig, wird der Formulareingang abgelehnt und der Nutzer erhält eine entsprechende Fehlermeldung. Für jedes Formularelement kann separat festgelegt werden, ob es serverseitig validiert werden soll.
67
68 Die serverseitige Validierung ist nur möglich für die Eigenschaften, welche über die grafische Oberfläche konfigurierbar sind. Falls eigene Logik oder Validaten über JavaScript erstellt wurden, können, wird dies bei der serverseitigen Validierung nicht berücksichtigt. Wenn speziell Validatoren (wie weiter unten erläutert) überschrieben werden, darf die serverseitige Validierung nicht aktiviert werden.
69
70 == Eigene Validierungsfunktionen ==
71
72 {{figure image="designer_validators_errorfunc_de.png" width="500"}}
73 Durch Hinzufügen einer Validierungsfunktion können eigene Regeln zur Prüfung von Formularelementen erstellt werden.
74 {{/figure}}
75
76 Für komplexe Anwendungsfälle kann es notwendig sein, eigene JavaScript-Logik zur Validierung zu schreiben. {{jsdoc page="jquery" name="errorfunc"}}Hierzu steht die Funktion errorFunc zur Verfügung.{{/jsdoc}}
77
78 Für ein Formularfeld wird eine JavaScript-Funktion definiert, welche prüft, ob das Feld gültig ist und im Fehlerfall eine Fehlernachricht zurückliefert:
79
80 {{js}}
81 $('[name="tfEmail"]').errorFunc(function(){
82 // Der Datentyp des Felds 'tfEmail' wurde auf 'E-Mail' gesetzt.
83 // Wir fügen eine zusätzliche Bedingung hinzu: Der Host muss entweder 'example.com' oder 'example.de' lauten.
84 const value = String(this.val() || "");
85 const hostIndex = value.indexOf("@");
86 const host = hostIndex >= 0 ? value.substr(hostIndex + 1) : "";
87 if (host === "example.com" || host === "example.de") return "";
88 return "Der Host muss entweder example.de oder example.com lauten!";
89 });
90 {{/js}}
91
92 {{jsIE}}
93 $('[name="tfEmail"]').errorFunc(function(){
94 // Der Datentyp des Felds 'tfEmail' wurde auf 'E-Mail' gesetzt.
95 // Wir fügen eine zusätzliche Bedingung hinzu: Der Host muss entweder 'example.com' oder 'example.de' lauten.
96 var value = String(this.val() || "");
97 var hostIndex = value.indexOf("@");
98 var host = hostIndex >= 0 ? value.substr(hostIndex + 1) : "";
99 if (host === "example.com" || host === "example.de") return "";
100 return "Der Host muss entweder example.de oder example.com lauten!";
101 });
102 {{/jsIE}}
103
104 == Plugins ==
105
106 Schließlich ist es auch möglich, Validatoren über [[Java-Plugin>>doc:Formcycle.UserInterface.Client.Plugins]] zu {{formcycle/}} hinzuzufügen. Nach der Installation des Plugins sind diese als Datentype auswählbar. Entwickler finden [[hier>>doc:Formcycle.PluginDevelopment.Types.IPluginValidationRule]] die Erläuterung zu diesem Plugin-Typ.
107
108 == Überschreiben von vorhandenen Validatoren ==
109
110 {{figure image="designer_validators_custom_de.png" width="500"}}
111 Hinzufügen eines neuen Validators im globalen Objekt //XM_FORM_VRULES//. Es muss noch das HTML-Attribut //vdt// des Elements auf den Namen des Validators gesetzt werden.
112 Überschreiben eines vorhandenen Validators.
113 {{/figure}}
114
115 {{warning}}
116 Das Überschreiben von Validatoren ist eine veraltete Funktion und sollte nicht mehr genutzt werden. Dies dient auch der besseren Wartbarkeit. Stattdessen kann entweder der Datentyp //regexp// verwendet werden oder ein eigener Validator über {{jsdoc page="jquery" name="errorfunc"/}} oder Plugins hinzugefügt werden.
117 {{/warning}}
118
119 Es ist möglich, vorhandene Validatoren zu überschreiben. Die Validatoren sind reguläre Ausdrücke und befinden sich im JavaScript-Objekt //window.XM_FORM_VRULES//. Zudem finden sich im JavaScript-Objekt //window.XM_FORM_I18N// die dazugehörigen Fehlernachrichten. Per JavaScript können diese Objekte modifiziert werden.
120
121 Um etwa den Validator für einen Geldbetrag so zu ändern, dass statt einem Komma ein Punkt als Trennzeichen akzeptiert wird, kann folgender Code zum Überschreiben benutzt werden:
122
123 {{code language="javascript"}}
124 XM_FORM_VRULES.money = /^-{0,1}([0]{1}|[1-9]{1}[0-9]*)[.]{1}[0-9]{2}$/;
125 XM_FORM_I18N.money = "Bitte verwenden Sie als Trennzeichen einen Punkt (z.B. 100.00)";
126 {{/code}}
127
128 Zudem ist es auch möglich, in den Objekten //XM_FORM_VRULES// und //XM_FORM_I18N// eigene Einträge einzufügen. Um diesen Validator an einem Textfeld zu verwenden, muss dem Textfeld der entsprechende Wert für das HTML-Attribut //vdt// gegeben werden.
129
130 Beispielsweise kann wie folgt ein Validator für Zahlen mit maximal fünf Stellen und zwei Nachkommastellen erstellt werden:
131
132 {{code language="javascript"}}
133 XM_FORM_VRULES.number_5_2 = /^(0|[1-9]\d{0,4}),\d\d$/;
134 XM_FORM_I18N.number_5_2 = "Bitte geben Sie eine Fließkommazahl ein mit 2 Nachkommastellen und maximal 5 Stellen vor dem Komma";
135 {{/code}}
136
137 Der neue Validator hat also den Namen //number_5_2//. Dieser Name muss als Wert des Attributs //vdt// dem Textfeld gegeben werden.

Navigation

Copyright 2000-2024