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

• 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

-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

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

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

elements

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 {

            // 原生验证不可用

        }
    }
}

ü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):

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

            // 原生验证可用

        }
        else {

            // 原生验证不可用

        }

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

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

-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

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

.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. 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

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.

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!