Validierung interaktiver HTML-Formulare

Das Erstellen von Formularen in HTML ist immer etwas kompliziert. Zuerst müssen Sie das HTML-Markup korrekt schreiben, dann müssen Sie sicherstellen, dass jedes Formularelement vor dem Absenden einen verwendbaren Wert hat, und schließlich müssen Sie den Benutzer warnen, wenn ein Problem auftritt.

Glücklicherweise hat HTML5 einige neue Funktionen eingeführt, die diese Aufgabe erheblich erleichtern. Insbesondere wurden Formularsteuerelemente um die Unterstützung von Einschränkungen erweitert, sodass der Browser Formularinhalte auf der Clientseite ohne Verwendung von JavaScript validieren kann.

WebKit bietet bereits teilweise Unterstützung. Es ist jetzt möglich, Eigenschaften eines Formularsteuerelements zu verwenden, um Einschränkungen zu beschreiben, und dann die checkValidity()-API in JavaScript zu verwenden, um die Gültigkeit eines Formularsteuerelements und der gesamten Formulareingabe abzufragen. Es ist auch möglich, die ValidityState-API zu verwenden, um zu verstehen, welche Einschränkung verletzt wurde.

Allerdings unterstützte WebKit zuvor keine interaktive HTML-Formularvalidierung, die beim Senden des Formulars (es sei denn, das novalidate-Attribut ist für das

-Element festgelegt) oder bei Verwendung der reportValidity()-API erfolgen würde. Darüber hinaus freuen wir uns, Ihnen mitteilen zu können, dass Webkit dies jetzt unterstützt und die Funktion in Safari Technology Preview 19 aktiviert ist. Mit der interaktiven Formularvalidierung validiert WebKit jetzt alle Formularsteuerelemente in einem Formular. Wenn auch nur ein Formularsteuerelement gegen die Einschränkung verstößt, legt WebKit den Eingabefokus auf das erste, scrollt durch die Schnittstellenseite, um das Steuerelement anzuzeigen, und zeigt dann daneben eine Blasenmeldung an, um das Problem zu erklären.

Überprüfungseinschränkungen

​Eingabetyp

Einige Eingabetypen unterliegen inhärenten Einschränkungen. Wenn der Typ auf „E-Mail“, „Nummer“ oder „URL“ eingestellt ist, wird automatisch geprüft, ob der eingegebene Wert eine gültige E-Mail-Adresse, Nummer oder URL ist, zum Beispiel:

<input type="email">

Verifizierungsattribute

Die folgenden Eigenschaften können zur Beschreibung von Einschränkungen in Formularsteuerelementen verwendet werden:

• erforderlich: Teilt dem Benutzer mit, dass ein Wert eingegeben werden muss.

• 
  

• pattern="[a-z]": Teilt dem Benutzer mit, dass er einen Wert eingeben muss, der dem angegebenen regulären JavaScript-Ausdruck entspricht.

• 
  

• minlength=x: teilt dem Benutzer mit, dass er einen Wert von mindestens x Zeichen eingeben muss.

• 
  

• maxlength=y: teilt dem Benutzer mit, dass er einen Wert von höchstens x Zeichen eingeben muss.

• 
  

• min=x: Teilt dem Benutzer mit, dass er einen Wert größer oder gleich x eingeben muss. .

• 
  

• max=y: teilt dem Benutzer mit, dass er einen Wert kleiner oder gleich y eingeben muss.

• 
  

• step=x: Teilt dem Benutzer mit, dass er einen Wert eingeben muss, der minimal plus ein Vielfaches von x ist.

Einschränkungsüberprüfung

Die Einschränkungsüberprüfung kann auf folgende zentralisierte Weise ausgelöst werden:

• checkValidity() kann für ein Formularelement oder ein bestimmtes Formularsteuerelement aufgerufen werden. Diese Methode gibt false zurück, wenn eine Einschränkung verletzt wird. Gleichzeitig wird ein Ereignis namens „ungültig“ für das Element ausgelöst, das gegen die Einschränkung verstößt. Sie können überprüfen, welche Einschränkung verletzt wurde, indem Sie das ValidityState-Objekt verwenden, das über die Eigenschaft „validity“ im Formularsteuerelement verfügbar gemacht wird.

• 
  

• reportValidity() kann für eine Formulareinschränkung oder ein bestimmtes Formularsteuerelement aufgerufen werden. Dadurch wird eine interaktive Validierung der Einschränkungen ausgelöst. Darüber hinaus legen checkValidity() und reportValidity() den Eingabefokus auf das erste Element, bei dem überprüft wurde, ob es gegen die Einschränkung verstößt, und zeigen daneben eine Blasenmeldung an, in der das Problem beschrieben wird.

• 
  

• Die interaktive Formularvalidierung erfolgt auch, wenn das Formular gesendet wird, es sei denn, das Attribut „novalidate“ ist für das Element festgelegt.

Benutzerdefinierte Einschränkungen

Durch die Verwendung von JavaScript zur Validierung und die Nutzung der setCustomValidity()-API können Sie komplexere Validierungseinschränkungen implementieren oder nützlichere Fehlermeldungen für Eingaben bereitstellen, die gegen Einschränkungen verstoßen.

JavaScript kann durch Abhören eines bestimmten Ereignisses in einem Formularsteuerelement ausgelöst werden (z. B. onchange, oninput, ...). Der ausgeführte JavaScript-Code kann dann die Daten des Formularsteuerelements validieren und dann setCustomValidity() verwenden, um die Fehlermeldung des Steuerelements zu aktualisieren:

<label for="feeling">Feeling:</label>
<input id="feeling" type="text" oninput="validateFeeling(this)">
<script>
 function validateFeeling(input) {
   if (input.value == "good" || input.value == "fine" || input.value == "tired") {
     input.setCustomValidity(&#39;"&#39; + input.value + &#39;" is not a feeling&#39;);
   } else {
     // The data is valid, reset the error message.
     input.setCustomValidity(&#39;&#39;);
   }
 }
</script>

Eingabeaufforderung für die Bestätigungsmeldung

Bei der Durchführung einer interaktiven Formularvalidierung wird neben dem ersten Formularsteuerelement, das Daten enthält, die gegen die zu validierenden Einschränkungen verstoßen, eine Sprechblase mit einer Beschreibung des Problems angezeigt, etwa so:

Einige lokalisierte Verifizierungsmeldungen sind standardmäßig für bestimmte Einschränkungen festgelegt. Wenn Sie die Validierungsnachricht anpassen möchten, sollten Sie die Verwendung der API setCustomValidity() in Betracht ziehen. Beachten Sie, dass WebKit auch die Internationalisierungs-API von JavaScript unterstützt, die uns bei der Lokalisierung benutzerdefinierter Verifizierungsnachrichten helfen kann.

Zusammenfassung

Die Validierung interaktiver HTML-Formulare wird jetzt in Webkit unterstützt und ist in Safari Technology Preview 19 aktiviert. Bitte testen Sie unsere Online-Demo, um diese Funktion kennenzulernen. Gerne können Sie auch Fehler melden.

Das obige ist der detaillierte Inhalt vonValidierung interaktiver HTML-Formulare. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!