Total.js platform
Total.js platform

JavaScript platform for everyone

Wie erstelle ich eine Benutzer Registrierung mit jComponents

Wie erstelle ich ein Anmeldeformular?

Dieser Blogbeitrag beschreibt, wie man ein Anmeldeformular mit Hilfe der jComponent Library und bestehender Komponenten auf Componentator erstellt. Also lasst uns anfangen:

Variabel


Zuerst einmal müssen wir die Daten irgendwo speichern. Also werden wir die Variable mit dem Namen form als Objekt deklarieren. Dieses Objekt enthält Informationen wie form.email:

BTW dieser Schritt ist nicht notwendig, da jComponent das Object selbst erstellt.

Von Grund auf neu


Die Komponenten haben ein eigenes CDN. Nur um es klarzustellen. Alle Komponenten von componentator.com haben ein CDN, so dass die jcomponents (Komponenten) nicht lokal herunterladen werden müssen. Dies ist eine der vielen mächtigen Waffen von jComponent. Ließ hier mehr über jComponents und CDN.

Optionsschaltfläche


Wir werden Radio-Button für die Geschlechterauswahl verwenden. Dies ist eine einfache Komponente. Unser erster Code sollte also so aussehen:

Konfiguration

Jede jComponent hat eine eigene Konfiguration. Stelle immer sicher, dass diese immer die Konfiguration lesen. Die jComponent unterstützt das Argument "required". Also schalten wir es ein und deaktivieren den Inline-Modus.

Wie einfach ist das? Das Argument "required" ist sehr wichtig für die jComponent validation.

E-Mail, Passwort, Alter, Alter


Die nächste jComponent ist vielseitig einsetzbarinput. Hab keine Angst vor den vielen Konfigurationsoptionen. Wir fangen mit einer E-Mail-Eingabe erst mal an:

Lass uns einige Optionen aus der Konfiguration verwenden:

Alter

Das Alter ist fast das gleiche, nur der Typ wird von "E-Mail" auf "Nummer" geändert. Die Komponente unterstützt die automatische Validierung, daher werden wir sie verwenden.

Passwort

Das Passwort ist etwas knifflig, da wir ein Bestätigungs-E-Mail-Formular benötigen.

Und Passwort-Bestätigung:

Javascript

Los geht's! Endlich etwas Javascript. Wir benötigen nur einen kleinen WATCHer für form.passwordconfirm.

Validierung


Magie. Nein, im Ernst. Diese Komponente ist wie Magie. Oh, und wir verwenden click data-bind:

Das Problem ist, dass Passwörter unterschiedlich sein können. Für solche Fälle gibt es die Bedingung "if". Okay, es ist eine Lüge. Die Validierung funktioniert. Aber ich möchte dir zeigen, ob und wie mächtig die Option ist.

und die Funktion:

Fortgeschrittene Nutzung


Die Passwort-Bestätigung kann für langsamere Benutzer verwirrend sein. Wie wäre es also mit der Überprüfung der Passwort-Bestätigung erst nach der Änderung? Es ist ganz einfach. Die Komponenten haben eine spezielle Konfiguration (https://wiki.totaljs.com/jcomponent/05-component/#configuration). Besonders $binding.

Wir haben die Fehlermeldung abgebrochen. Ich bin sicher, dass es daran liegt, dass INVALID vor der Komponentenvalidierung aufgerufen wird. Also werden wir eine kleine Verzögerung hinzufügen.

Vollständiger Quellcode