Glücklicher HTML5 -Formularvalidierung in Vue

input:invalid {} -Stil von CSS ist nützlich, wenn das Formularelement ungültig ist, aber die Benutzererfahrung ist schlecht, wenn es direkt verwendet wird. Beispielsweise wird ein ungültiger Stil sofort angezeigt, wenn ein Formular geladen wird, was den Benutzer verwirrt. Daher ist diese Verwendung in praktischen Anwendungen selten. Wenn dieses Problem jedoch vermieden wird, kann :invalid Selektor eine große Rolle bei der Formvalidierung spielen, ohne sich auf große Bibliotheken zu verlassen.

Dave schlug eine Verbesserung vor, die auf der ursprünglichen Idee von 2017 basiert:

 <code>form.errors :invalid { outline: 2px solid red; }</code>

Der native Fehlerstil wird erst angewendet, nachdem bestätigt wurde, dass sich das Formular in einem Fehlerzustand befindet und errors Fehlerklasse hinzugefügt wird. Das Testen ist auch einfach. Sie können diese Klasse beispielsweise anwenden, wenn die Schaltfläche "Senden" angeklickt wird:

 <code>submitButton.addEventListener("click", (e) => { form.classList.toggle("errors", !form.checkValidity()) });</code>

Es kann auch angewendet werden, wenn der Eingabefeld zu anderen Zeiten den Fokus verliert. Sie können sogar jedes Eingabefeld in einen Wrapper einwickeln und gegebenenfalls die Wrapper -Klasse schalten.

Dave wendet diese Idee auf Vue an:

Wir setzen errors auf false , wenn die Formularkomponente initialisiert wird, da wir nicht möchten, dass der falsche Stil angezeigt wird, bevor der Benutzer das Formular einreicht. Die invalidateForm Funktion setzt this.error nur auf true . Dies ist einer der Nachteile CSS :invalid Pseudoklasse, sie ist zu dringend. Durch das Anhören des invalid Ereignisses kann die Anwendung von Stilen bis nach dem ersten Versuch des ersten Formulars verzögert werden, wir wissen, dass ein Fehler im Formular vorliegt.

Dieser Ansatz erfordert keine zusätzlichen Bibliotheken, wodurch die native Funktionalität der HTML -Formvalidierung voll ausgeht. Der folgende Link ist eine verbesserte Version, in der auch eine Fehlermeldung angezeigt wird:

Direkter Link →

Das obige ist der detaillierte Inhalt vonGlücklicher HTML5 -Formularvalidierung in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!