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:
<div data---="radiobutton__form.gender__items:Male|0,Female|1,Other|2">Sex:</div>
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.
<div data---="radiobutton__form.gender__required:1;inline:0;items:Male|0,Female|1,Other|2">Sex:</div>
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:
<div data---="input__form.email__type:email;required:1">Email</div>
Lass uns einige Optionen aus der Konfiguration verwenden:
<div data---="input__form.email__type:email;required:1;placeholder:email@example.com;ricon:envelope">Email</div>
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.
<div data---="input__form.age__type:number;required:1;minvalue:5;maxvalue:120;error:Are you sure about your age?">Age</div>
Passwort
Das Passwort ist etwas knifflig, da wir ein Bestätigungs-E-Mail-Formular benötigen.
<div data---="input__form.password__type:password;required:1;minlength:6;error:Minimum password length is 6 characters">Password</div>
Und Passwort-Bestätigung:
<div data---="input__form.passwordconfirm__type:password;required:1;error:Passwörter stimmt nicht überein">Passwort erneut</div>
Javascript
Los geht's! Endlich etwas Javascript. Wir benötigen nur einen kleinen WATCHer für form.passwordconfirm.
WATCH('form.passwordconfirm', function(path, value, type) {
if (Typ && value !== form.password)
INVALID('form.passwordconfirm');
});
Validierung
Magie. Nein, im Ernst. Diese Komponente ist wie Magie. Oh, und wir verwenden click data-bind:
<div data---="validation__form">
<Button name="submit" disabled="disabled" data-bind="null__click:submit">SUBMIT FORM</button>
</div>
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.
<div data---="validation__form__if:value && value.password ==== value.passwordconfirm">
<Button name="submit" disabled="disabled" data-bind="null__click:submit">SUBMIT FORM</button>
</div>
und die Funktion:
function submit() {) {
console.log('Formular senden:', form);
}
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.
<div data---="input__form.passwordconfirm__type:password;required:1;error:Passwörter stimmt nicht überein;$binding:2">Passwort wieder</div>
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.
WATCH('form.passwordconfirm', function(path, value, type) {
if (type && value !== form.password) {
setTimeout(function(){)
INVALID('form.passwordconfirm');
}, 10);
}
});
Vollständiger Quellcode
<!DOCTYPE html>
<html>
<head>
<title>Sign up</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=11" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="robots" content="all,follow" />
<link href="https://cdn.componentator.com/spa.min@18.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.componentator.com/spa.min@18.js"></script>
</head>
<body>
<br>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-3">
<div class="m" data---="radiobutton__form.sex__required:1;inline:0;items:Male|0,Female|1,Other|2">Sex:</div>
<div class="row">
<div class="col-md-8">
<div class="m" data---="input__form.email__type:email;required:1;placeholder:email@example.com;ricon:envelope">Email</div>
</div>
<div class="col-md-4">
<div class="m" data---="input__form.age__type:number;required:1;minvalue:5;maxvalue:120;error:Are you sure about it?">Age</div>
</div>
</div>
<div class="m" data---="input__form.password__type:password;required:1;minlength:6;error:Minimum password length is 6 characters">Password</div>
<div class="m" data---="input__form.passwordconfirm__type:password;required:1;error:Passwords does not match;$binding:2">Password again</div>
<div data---="validation__form__if:value && value.password === value.passwordconfirm">
<button name="submit" disabled="disabled" data-bind="null__click:submit">SUBMIT FORM</button>
</div>
</div>
</div>
</div>
<script>
var form = {};
function submit() {
console.log('Submit:', form);
}
WATCH('form.passwordconfirm', function(path, value, type) {
if (type && value !== form.password) {
setTimeout(function(){
INVALID('form.passwordconfirm');
}, 10);
}
});
</script>
</body>
</html>
