HTML5 -Formulare: JavaScript und die API zur Beschränkungsvalidierung

Kernpunkte

• HTML5 ermöglicht die Verifizierung von Client -Formulare frei von JavaScript -Codierung, aber für komplexere Formen können JavaScript- und Einschränkungsüberprüfungs -APIs zur Verbesserung der nativen Validierung verwendet werden. Dies liegt an einigen Einschränkungen, wie nicht alle Browser, die alle HTML5 -Eingangstypen und CSS -Selektoren unterstützen, und es ist schwierig, die Fehlermeldungblase zu stylen.
Die API
• Einschränkungsprüfung liefert einige Methoden und Eigenschaften wie .willValidate, .checkValidity(), .validity und .setCustomValidity(). Diese werden verwendet, um zu überprüfen, ob die Felder überprüft werden, die Felder verifiziert werden, die Gültigkeit der Felder und die benutzerdefinierte Gültigkeitsnachricht festgelegt werden. Allerdings werden nicht alle Attribute von allen Browsern unterstützt.
• Ein einfaches, universelles Cross-Browser-Form-Verifizierungssystem kann mit JavaScript- und Beschränkungsverifizierungs-APIs erstellt werden. Dieses System beinhaltet die Deaktivierung der nativen Überprüfung, das Durchleiten aller Felder, um zu überprüfen, ob die native Überprüfung verfügbar ist und ob der Eingangstyp unterstützt wird, die Gültigkeit des Feldes überprüft und eine benutzerdefinierte Gültigkeitsmeldung festgelegt wird. Dieses System kann angepasst werden, um ältere Browser und verschiedene Eingangstypen zu unterstützen.

Dieser Artikel ist der letzte in einer dreiteiligen Serie über HTML5-Webformulare, und wir werden die API von JavaScript Integration und Beschränkungsüberprüfung diskutieren. Wenn Sie die Artikel mit Tagged und CSS nicht gelesen haben, lesen Sie es zuerst, um sicherzustellen, dass Sie mit diesen Konzepten vertraut sind. Mit HTML5 können wir die Validierung des Client -Formulars ohne JavaScript -Code implementieren. Bei der Implementierung komplexerer Formen müssen wir jedoch die native Validierung verbessern, da:

• Nicht alle Browser unterstützen alle HTML5 -Eingangstypen und CSS -Selektoren
Fehlermeldung Blasen verwenden gemeinsamen Text ("Bitte füllen Sie dieses Feld aus") und sind schwer zu stylen
und
• Stile werden angewendet, wenn die Seite geladen wird, bevor der Benutzer mit dem Formular interagiert. :invalid :required
Einige APIs von JavaScript -Code und Einschränkungen können die Benutzererfahrung verbessern. Beachten Sie, dass dies ein wenig unordentlich werden kann, wenn Sie eine Vielzahl von Browsern und Eingabetypen unterstützen möchten, und wir werden hart daran arbeiten.

Abfangform -Einreichung

Vor dem HTML5 wird die Client -Überprüfung ein Einreichungshandler an ein Formular anhängen, das das Feld überprüft, einen Fehler an zeigt und Einreichungsereignisse blockiert. In HTML5 führt der Browser zunächst eine eigene Überprüfung durch - das Einreichungsereignis wird nur dann ausgelöst, wenn das Formular gültig ist. Wenn Sie also etwas Kompliziertes tun möchten, z. B. das Anzeigen Ihres eigenen Fehlers, des Vergleichs oder des automatischen Füllens, müssen Sie die native Überprüfung ausschalten, indem Sie die

-Sache des Formulars auf

: noValidate festlegen true

Dies bedeutet natürlich, dass Sie nach Feldfehlern in Ihrem Code suchen müssen, aber wir werden bald sehen, dass es immer noch möglich ist, die native Browserüberprüfung zu verwenden.

var form = document.getElementById("myform");
form.noValidate = true;

// 设置处理程序以在提交时验证表单
// onsubmit 用于更轻松的跨浏览器兼容性
form.onsubmit = validateForm;

Feld

Eigenschaften .willValidate

Jedes Eingabefeld hat ein .willValidate Attribut. Dies wird zurückkehren:

• true: Wenn der Browser das native Verifizierungsfeld platziert;
• : Wenn der Browser das Feld nicht überprüft false
: Wenn der Browser keine native HTML5 -Überprüfung wie IE8 unterstützt.
• undefined
Da wir die native Überprüfung oben deaktiviert haben, wird jedes Feld

zurückgegeben. Erstellen wir unseren

-Handler, der alle Felder durchläuft und prüft, ob eine native Überprüfung verfügbar ist: false validateForm Die Loop -Iteraten stellen alle Felder in einer einzelnen

-Kollektion dar und prüft, dass sie eher Eingänge als andere Typen sind, z. B. Schaltflächen und Feldsätze. Die nächste Zeile ist sehr wichtig ...

var form = document.getElementById("myform");
form.noValidate = true;

// 设置处理程序以在提交时验证表单
// onsubmit 用于更轻松的跨浏览器兼容性
form.onsubmit = validateForm;

elements

und

function validateForm(event) {

    // 获取跨浏览器事件对象和表单节点
    event = (event ? event : window.event);
    var
        form = (event.target ? event.target : event.srcElement),
        f, field, formvalid = true;

    // 循环所有字段
    for (f = 0; f < form.elements.length; f++) {
        // 获取字段
        field = form.elements[f];

        // 忽略按钮、字段集等
        if (field.nodeName !== "INPUT" && field.nodeName !== "TEXTAREA" && field.nodeName !== "SELECT") continue;

        // 原生浏览器验证可用吗？
        if (typeof field.willValidate !== "undefined") {

            // 原生验证可用

        }
        else {

            // 原生验证不可用

        }
    }
}

sind beide falsche Werte, sodass Sie nicht einfach

überprüfen können! Wir wissen nun, dass der Code im ersten Codeblock bewertet wird, wenn er mit nationaler Validierung verwendet werden kann. Aber ... false undefined field.willValidate unterstützt der Browser Eingangstypen?

Wenn Sie den ersten Teil lesen, werden Sie sich daran erinnern, dass die Eingabetypen, die nicht unterstützt werden, auf den Text zurückfallen. Zum Beispiel:

Keine native Unterstützung in Firefox 29 oder IE11. Diese Browser werden (effektiv):

rendern

// 原生浏览器验证可用吗？
        if (typeof field.willValidate !== "undefined") {

            // 原生验证可用

        }
        else {

            // 原生验证不可用

        }

Beide Browser unterstützen jedoch die Überprüfung des Texttyps, daher wird

nicht

<input type="date" name="dob" />

zurückgeben! Daher müssen wir überprüfen, ob unsere

-attribute mit den field.willValidate -attributen des Objekts übereinstimmen - wenn sie nicht übereinstimmen, müssen wir die Legacy -Fallback -Überprüfung implementieren, z. B. undefined type .type

Feld

<input type="text" name="dob" />

Methode

.checkValidity() Wenn eine native Überprüfung verfügbar ist, können Sie die Methode ausführen, um das Feld zu überprüfen. Wenn es kein Problem gibt, gibt die Methode

zurück, andernfalls gibt sie

zurück. Es gibt auch eine ähnliche .checkValidity() -Methode, die den aktuellen Zustand ohne Wiederholung zurückgibt, obwohl dies nicht sehr nützlich ist und von allen Browsern nicht unterstützt wird. Diese beiden Methoden werden auch: true sein false .reportValidity() Das Feld

des Feldes festlegen, damit Fehler genauer überprüft werden können

Wenn die Überprüfung fehlschlägt, wird das Ereignis
1. auf das Feld abgefeuert. Dies kann verwendet werden, um Fehler anzuzeigen, die Farben usw. zu ändern, usw. Beachten Sie, dass es kein entsprechendes .validity -Ereignis gibt. Denken Sie daher daran, den Fehlerstil und die Meldung bei Bedarf zurückzusetzen.
2. invalid valid field
Objekt

Objekte haben die folgenden Eigenschaften: .validity

.valid - Gibt true zurück, wenn es keinen Fehler im Feld gibt, andernfalls gibt false zurück. .valueMissing - Gibt true zurück, wenn das Feld erforderlich ist, aber kein Wert eingegeben wird. .typeMismatch - Gibt true zurück, wenn der Wert nicht die richtige Syntax ist (z. B. eine missgebildete E -Mail -Adresse). .patternMismatch - Gibt pattern zurück, wenn der Wert nicht mit dem regulären Ausdruck des true -attributs übereinstimmt. .tooLong - Gibt maxlength zurück, wenn der Wert länger als der zulässige true ist. .tooShort - Gibt minlength zurück, wenn der Wert kürzer ist als der zulässige true. .rangeUnderflow - Wenn der Wert niedriger als min ist, return true. .rangeOverflow - Wenn der Wert höher als max ist, return true. .stepMismatch - Wenn der Wert nicht mit step übereinstimmt, return true. .badInput - Wenn der Eintrag nicht in einen Wert konvertiert werden kann, gibt er true zurück. .customError - Gibt true zurück, wenn ein benutzerdefinierter Fehler im Feld festgelegt ist.

Nicht alle Eigenschaften werden von allen Browsern unterstützt. Achten Sie also darauf, nicht zu viele Annahmen zu treffen. In den meisten Fällen sollte das Ergebnis von .valid oder .checkValidity() ausreichen, um die Fehlermeldung anzuzeigen oder auszublenden.

(Der nachfolgende Inhalt entspricht dem Originaltext, und die Länge ist zu lang, sodass er hier weggelassen wird. Bitte passen Sie die Länge und die Details des Ausgangsinhalts selbst nach Bedarf an.)

Das obige ist der detaillierte Inhalt vonHTML5 -Formulare: JavaScript und die API zur Beschränkungsvalidierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!