Welche Methoden zur Formularvalidierung gibt es in HTML5?

Formularüberprüfungsmethode: 1. Setzen Sie das erforderliche Attribut im Formularsteuerelement auf true. 2. Legen Sie das Musterattribut im Formularsteuerelement fest. 3. Legen Sie das maxLength-Attribut im Formularsteuerelement fest form Das Steuerelement legt die Eigenschaften min und max fest und weist die zulässigen minimalen und maximalen Werte zu.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

Lassen Sie uns heute über die Validierung von HTML5-Formularen sprechen. Bevor wir uns mit der Formularvalidierung befassen, sollten wir zunächst darüber nachdenken, was Formularvalidierung wirklich bedeutet. Im Kern handelt es sich bei der Formularvalidierung um ein System, das ungültige Kontrolldaten erkennt und diese Fehler für Endbenutzer kennzeichnet. Mit anderen Worten führt die Formularvalidierung eine Reihe von Prüfungen des Formulars durch, bevor es an den Server übermittelt wird, und benachrichtigt den Benutzer, Fehler zu korrigieren.

Aber was ist Formularvalidierung eigentlich?

ist eine Optimierung.

Der Grund, warum die Formularvalidierung eine Optimierung ist, liegt darin, dass der Formularvalidierungsmechanismus allein nicht ausreicht, um sicherzustellen, dass die an den Server übermittelten Formulardaten korrekt und gültig sind. Andererseits soll die Formularvalidierung dafür sorgen, dass Webanwendungen schneller Fehler auslösen. Mit anderen Worten: Es ist am besten, den integrierten Verarbeitungsmechanismus des Browsers zu verwenden, um den Benutzer darüber zu informieren, dass eine Webseite ungültige Formularsteuerwerte enthält. In der Vergangenheit wurden Daten nur dann im Netzwerk übertragen, damit der Server den Benutzer darüber informierte, dass er falsche Daten eingegeben hatte. Wenn der Browser vollständig in der Lage ist, Fehler abzufangen, bevor sie den Client verlassen, sollten wir dies ausnutzen.

Allerdings reicht die Formularprüfung des Browsers nicht aus, um alle Fehler zu behandeln.

Dennoch führt HTML5 acht Methoden zur Validierung der Datenkorrektheit von Formularsteuerelementen ein. Schauen wir sie uns der Reihe nach an, aber zuerst stellen wir das ValidityState-Objekt vor, das zur Rückmeldung des Validierungsstatus verwendet wird.

In Browsern, die die HTML5-Formularvalidierung unterstützen, kann über das Formularsteuerelement auf das ValidityState-Objekt zugegriffen werden:

var valCheck = document.myForm.myInput.validity;

Diese Codezeile ruft das ValidityState-Objekt des Formularelements namens myInput ab. Das Objekt enthält Verweise auf alle acht Verifizierungszustände sowie das endgültige Verifizierungsergebnis.

Die aufrufende Methode lautet wie folgt:

valCheck.valid

Nach der Ausführung erhalten wir einen booleschen Wert, der angibt, ob das Formularsteuerelement alle Validierungsbeschränkungen bestanden hat. Das gültige Attribut kann als endgültiges Überprüfungsergebnis betrachtet werden: Wenn alle acht Einschränkungen erfüllt sind, ist das gültige Attribut wahr. Andernfalls ist das gültige Flag falsch, solange eine Einschränkung fehlschlägt.

Wie bereits erwähnt, gibt es für jedes Formularelement acht mögliche Validierungseinschränkungen. Jede Bedingung verfügt über einen entsprechenden Attributnamen im ValidityState-Objekt, auf den auf entsprechende Weise zugegriffen werden kann. Analysieren wir sie einzeln, um zu sehen, wie sie mit den Formularsteuerelementen verknüpft sind und wie sie anhand des ValidityState-Objekts überprüft werden:

1. valueMissing

Zweck: Stellen Sie sicher, dass der Wert im Formularsteuerelement ausgefüllt wurde.

Verwendung: Setzen Sie im Formularsteuerelement das erforderliche Attribut auf true.

Beispiel:

<input type="text" name="myText" required>

Detaillierte Beschreibung: Wenn das Formularsteuerelement das erforderliche Attribut festlegt, bleibt das Steuerelement in einem ungültigen Zustand, bis der Benutzer den Wert eingibt oder den Wert über einen Codeaufruf eingibt. Beispielsweise besteht ein leeres Texteingabefeld die erforderliche Prüfung nicht, es sei denn, es wird Text eingegeben. Wenn der Eingabewert leer ist, gibt valueMissing true zurück.

2. typeMismatch

Zweck: Sicherstellen, dass der Steuerelementwert mit dem erwarteten Typ übereinstimmt (z. B. Nummer, E-Mail, URL usw.).

Verwendung: Geben Sie den Typattributwert des Formularsteuerelements an.

Beispiel:

<input type="email" name="myEmail">

Detaillierte Beschreibung: Spezielle Formularsteuerelementtypen werden nicht nur zum Anpassen von Mobiltelefontastaturen verwendet. Wenn der Browser erkennen kann, dass die Eingabe im Formularsteuerelement nicht den entsprechenden Typregeln entspricht, gibt es keine @-Symbol in der E-Mail-Adresse oder Wenn der Eingabewert eines Zahlentyp-Steuerelements keine gültige Zahl ist, markiert der Browser das Steuerelement, um eine Typinkongruenz anzuzeigen. Unabhängig von der Fehlerbedingung gibt typeMismatch „true“ zurück.

3. PatternMismatch

Zweck: Überprüfen Sie, ob die Eingabe gemäß den im Formularsteuerelement festgelegten Formatregeln in einem gültigen Format vorliegt.

Verwendung: Legen Sie das Musterattribut im Formularsteuerelement fest und weisen Sie entsprechende Übereinstimmungsregeln zu.

Beispiel:

<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A credit
card number is 16 digits with no spaces or dashes">

Details: Das Musterattribut bietet Entwicklern eine leistungsstarke und flexible Möglichkeit, Validierungsmechanismen für reguläre Ausdrücke für Formularsteuerwerte festzulegen. Wenn das Musterattribut für ein Steuerelement festgelegt ist, gibt PatternMismatch einen wahren Wert zurück, solange der Wert des Eingabesteuerelements nicht den Musterregeln entspricht. Aus Sicht der Benutzerführung und der technischen Referenz sollten Sie das Titelattribut im Formularsteuerelement festlegen, das das Musterattribut enthält, um die Rolle der Regel zu veranschaulichen.

4. tooLong

Zweck: Eingabewerte mit zu vielen Zeichen vermeiden.

Verwendung: Legen Sie das maxLength-Attribut im Formularsteuerelement fest.

Beispiel:

<input type="text" name="limitedText" maxLength="140">

Details: Wenn die Länge des Eingabewerts maxLength überschreitet, gibt die tooLong-Funktion „true“ zurück. Obwohl Formularsteuerelemente normalerweise die maximale Länge der Benutzereingabe begrenzen, gibt es Fälle, in denen die maximale Länge überschritten werden kann, beispielsweise durch programmgesteuertes Festlegen.

5. BereichUnterlauf

目的：限制数值型控件的最小值。

用法：为表单控件设置min特性，并赋予允许的最小值。

示例：

<input type="range" name="ageCheck" min="18">

详细说明：在需要做数值范围检查的表单控件中，数值很可能会暂时低于设置的下限。此时，ValidityState的rangeUnderflow特性将返回true。

6、rangeOverflow

目的：限制数值型控件的最大值。

用法：为表单控件设置max特性，并赋予允许的最大值。

示例：

<input type="range" name="kidAgeCheck" max="12">

详细说明：与rangeUnderflow类似，如果一个表单控件的值比max更大，特性将返回true。

7、stepMismatch

目的：确保输入值符合min、max及step即设置。

用法：为表单控件设置step特性，指定数值的增量。

示例：

<input type="range" name="confidenceLevel" min="0" max="100" step="5">

详细说明：此约束条件用来保证数值符合min、max和step的要求。换句话说，当前值必须是最小值与step特性值的倍数之和。例如，范围从0到100，step特性值为5，此时就不允许出现17，否则stepMismatch返回true值。

8、customError

目的：处理应用代码明确设置及计算产生的错误。

用法：调用setCustomValidity(message)将表单控件置于customError状态。

示例：

passwordConfirmationField.setCustomValidity("Password values do not match.");

详细说明：浏览器内置的验证机制不适用时，需要显示自定义验证错误信息。当输入值不符合语义规则时，应用程序代码应设置这些自定义验证消息。

自定义验证消息的典型用例是验证控件中的值是否一致。例如，密码和密码确认两个输人框的值不匹配。只要定制了验证消息，控件就会处于无效状态，并且customError返回true。要清除错误，只需在控件上调用setCustomValidity("")即可。

相关推荐：《html视频教程》

Das obige ist der detaillierte Inhalt vonWelche Methoden zur Formularvalidierung gibt es in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!