Leichte Formularvalidierung mit alpine.js und iodine.js

Moderne Benutzer erwarten ein sofortiges Feedback während der Formularvalidierung. Dieser Artikel zeigt, wie alpine.js und iodin.js, zwei leichte JavaScript-Bibliotheken, hoch interaktive Formen mit minimalem Overhead erstellen, ideal für kleine statische Websites oder servergerenderte Anwendungen (wie Schienen oder Laravel). Diese Bibliotheken vermeiden die Komplexität schwerer JavaScript -Build -Tools.

Wir werden ein Formular mit zunehmend verbesserter Validierung erstellen und die APIs von alpine.js und iod.js vorstellen. Das endgültige Formular bietet sofortiges Feedback zu ungültigen Eingängen.

Einführung von alpine.js und iodine.js

Alpine.js ist eine CDN-veranstaltete Bibliothek, die keine Build-Schritte oder -Er-Abhängigkeiten erfordert. Die präzise Dokumentation und die geringe Größe (8,36 KB Minified und Gziped) machen es unglaublich effizient. Es wird als JQuery/Vanille-JavaScript-Ersatz durch Vue-ähnliche Vorlagen beschrieben, nicht als Konkurrent für größere Frameworks.

Iodine.js ist eine Mikroform -Validierungsbibliothek, die für eine einfache Integration mit jedem Frontend -Framework entwickelt wurde. Es vereinfacht die Validierung durch Erlaubnis mehrerer Regeln pro Eingabefeld und liefert klare Fehlermeldungen.

Iodine.js in Aktion: Ein grundlegendes Beispiel

Hier ist ein grundlegendes clientseitiges Validierungsbeispiel mit iodin.js, das über CDN abgerufen wurde:

 // ... (iodine.js cdn link würde hier gehen) ...

Oder mit Skypack:

 Kingshottiodine von "https://cdn.skypack.dev/@kingshott/iodine" importieren;

Denken Sie daran, kingshottIodine beim Import von Skypack zu verwenden. Iods is die Methode überprüft die Gültigkeit der Input gegen bestimmte Regeln. Es gibt true für gültige Eingaben oder eine Fehlerzeichenfolge zurück.

Wir verwenden HTML -Datenattribute, um Validierungsregeln für jede Eingabe zu speichern:

<input type="text" name="username" data-rules='["required", "minLength:5"]'>

Vanilla JavaScript überträgt die Validierung:

 Sei Form = document.getElementById ("Form");
inputs = [... form.querySelectorAll ("Eingabe [Datenrules]")];

Funktion OnSubmit (Ereignis) {
  inputs.map ((input) => {
    if (iodine.is (input.value, json.parse (input.dataset.Rules))! == true) {
      Event.PreventDefault ();
      input.classList.add ("ungültig");
    }
  });
}
Form.AdDeVentListener ("Submit", OnSubmit);

In diesem grundlegenden Beispiel fehlt die Benutzerfreundlichkeit. Es bietet keine Fehlermeldungen und aktualisiert nicht dynamisch.

Verbesserung mit alpine.js

Alpine.js verbessert die Benutzererfahrung. Wir validieren auf Blur- oder Eingabeänderungen und geben sofortiges Feedback, ohne die Eingaben zu unterbrechen. Alpine.js ist über CDN enthalten:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v3.x.x/dist/alpine.min.js" defer></script>

Oder über Skypack:

 Alpinejs importieren "https://cdn.skypack.dev/alpinejs";

Wir verwalten den Eingabestatus (verschwommene Status- und Fehlermeldungen) in Alpine.js-Komponenten mit x-data . Eine Funktion definiert die Komponentendaten:

 Alpine.data ("Form", Form);
Alpine.start ();

Funktionsform () {
  zurückkehren {
    Benutzername: {Errormessage: '', verschwommen: false},
    E -Mail: {ErrorMessage: '', verschwommen: false},
    Passwort: {ErrorMessage: '', verschwommen: false},
    passwordconf: {errormessage: '', verschwommen: false},
    // ... (Funktionen werden später hinzugefügt) ...
  };
}

x-bind:class fügt bedingt die "ungültige" Klasse hinzu:

<input type="text" name="username" x-bind:class="{ 'invalid': username.errorMessage && username.blurred }" ...>

Reagieren auf Eingabeänderungen

Ereignishörer aktualisieren den Status der Komponente:

 // ... innerhalb der Funktion 'Form' ...
Blur: Funktion (Ereignis) {
  lass ele = event.target;
  this [ele.name] .blurred = true;
  lass Rules = json.Parse (ele.dataset.RULES);
  this [ele.name] .rormessage = this.geterrormessage (ele.value, Regeln);
},
Eingabe: Funktion (Ereignis) {
  lass ele = event.target;
  lass Rules = json.Parse (ele.dataset.RULES);
  this [ele.name] .rormessage = this.geterrormessage (ele.value, Regeln);
},
getRrormessage: Funktion (Wert, Regeln) {
  lass isvalid = iodine.is (Wert, Regeln);
  if (isvalid! == true) {
    Return Iodin.Geterrormessage (isvalid);
  }
  zurückkehren '';
},
// ...

Fehlermeldungen werden mit x-show und x-text angezeigt:

<p x-show="username.errorMessage && username.blurred" x-text="username.errorMessage"></p>

Der @submit -Ereignishandler (innerhalb der Alpine -Komponente) erstellt die Einreichung von Formular:

 Senden: Funktion (Ereignis) {
  Inputs = [... this.
  inputs.map ((input) => {
    if (iodine.is (input.value, json.parse (input.dataset.Rules))! == true) {
      Event.PreventDefault ();
    }
  });
}

Server-Seite Fehlerbehandlung

Um serverseitige Fehler zu behandeln, speichern wir sie in einem data-server-errors -Attribut und verwenden x-init um den Status der Komponente zu füllen:

<input type="text" name="username" data-server-errors='["Username already exists"]' ...>

Die init -Funktion in der alpinen Komponente wird dies verarbeiten:

 init: function () {
  this.inputElements = [... this.
  this.initdomData ();
},
initdomData: function () {
  this.inputElements.map ((ele) => {
    this [ele.name] = {
      ServerErrors: json.parse (ele.dataset.ServerErrors),
      verschwommen: Falsch
    };
  });
}

Die getErrorMessage -Funktion wird aktualisiert, um Serverfehler zu priorisieren:

 Geterrormessage: Funktion (ele) {
  if (this [ele.name] .ServerErrors.length> 0) {
    Gibt dies zurück [Ele.name] .ServerErrors [0];
  }
  // ... (Rest der Funktion bleibt weitgehend gleich) ...
}

Umgang miteinander abhängigen Eingängen

Für interdependente Eingaben (z. B. die Bestätigung der Kennwort) werden alle Fehlermeldungen bei jeder Eingabeänderung aktualisiert. addRule -Methode von Iodin erstellt eine benutzerdefinierte Regel:

 Iodin.Addrux (
  "MatchingPassword",
  value => value === document.getElementById ("Passwort"). Value.
);
Iodine.Messages.MatchingPassword = "Passwortbestätigung muss das Passwort übereinstimmen";

Die Funktion updateErrorMessages übernimmt dies:

 updateRormessages: function () {
  this.inputElements.map ((ele) => {
    this [ele.name] .rormessage = this.geterrormessage (Elee);
  });
},

Die getErrorMessage -Funktion wird verfeinert, um nur eine Nachricht zurückzugeben, wenn die Eingabe verschwommen ist:

 Geterrormessage: Funktion (ele) {
  // ... (Serverfehlerprüfung) ...
  const error = iodine.is (ele.value, json.parse (ele.dataset.Rules));
  if (error! == true && this [ele.name] .blurred) {
    Return Iodin.Geterrormessage (Fehler);
  }
  zurückkehren "";
}

Ereignishörer werden auf das übergeordnete Formularelement verschoben, wobei focusout anstelle von blur verwendet wird:

...

Schließlich wird ein verblassender Übergang für visuelle Feedback hinzugefügt:

<p x-show="username.errorMessage" x-text="username.errorMessage" x-transition:enter=""></p>

Dies führt zu einer reaktiven, wiederverwendbaren und effizienten Formularvalidierungslösung. Die bereitgestellte form kann über mehrere Formulare hinweg verwendet werden, indem die HTML -Attribute entsprechend konfiguriert werden.

Das obige ist der detaillierte Inhalt vonLeichte Formularvalidierung mit alpine.js und iodine.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!