HTML5 bietet ein hohes Ma? an Optimierung für Formulare, sei es Semantik, Widgets oder Datenformatüberprüfung. Ich denke, Sie werden die Browserkompatibilit?t definitiv als Ausrede nutzen, um diese ?neuen Funktionen“ nicht zu verwenden, aber das sollte niemals der Grund für Stagnation sein. Darüber hinaus gibt es Toolbibliotheken wie Modernizr und Ployfill, die Ihnen helfen, wenn sie nicht unterstützt werden Fallback-Verarbeitung auf HTML5-Browsern. Wenn Sie diese neuen Formularfunktionen tats?chlich ausprobieren, werden Sie sich garantiert in sie verlieben. Wenn der einzige Fehler darin besteht, dass der Stil des Eingabeaufforderungsfelds der Standardstil des Browsers ist und Sie ihn nicht ?ndern k?nnen, dann ist das gut, wenn Sie an das ?sthetische Niveau der Designer der Browserhersteller glauben (ich glaube, dass ihr Designniveau besser ist). der meisten gew?hnlichen Menschen) Besser, wenn Sie nicht auf Stilkompatibilit?t achten), lernen Sie es einfach schnell!
Native Validierung
Eingabetyp
HTML5 bietet viel native Unterstützung für die Datenformatvalidierung, zum Beispiel:

<input type=&#39;email&#39;/>

Wenn Sie auf die Schaltfl?che ?Senden“ klicken und das von Ihnen eingegebene Format nicht mit der E-Mail übereinstimmt, schl?gt die übermittlung fehl und der Browser zeigt Ihnen eine Fehlermeldung an.
Zum Beispiel unter Chrome:

Hinweis:
1 Die Browserüberprüfung wird nur ausgel?st, wenn Sie
2 Die Stile der Eingabeaufforderungsinformationen sind unterschiedlich.
3. Wenn mehrere Eingaben nicht den Anforderungen entsprechen, wird nur ein Fehler angezeigt. Im Allgemeinen wird die relativ frühere Eingabe im Formular angezeigt.
Nehmen Sie diese nicht an Es ist selbstverst?ndlich, dass die Eingabe, wenn der Typ gleich ?tel“ ist, vom Browser blockiert wird und nur beim Absenden eine Fehlermeldung angezeigt wird spielt auf der PC-Seite eine semantische Rolle, kann aber auf der mobilen Seite verwendet werden. Die Umwandlung der generierten Tastatur in eine reine Zifferntastatur spielt bei der Datenüberprüfung keine Rolle.
Muster
Sie k?nnen das Musterattribut verwenden, um eine benutzerdefinierte Formatvalidierung für Datenformate festzulegen, für die der Browser keine native Validierung bietet. Der Wert des Musterattributs ist ein regul?rer Ausdruck (Zeichenfolge):

<input type=&#39;tel&#39; pattern=&#39;[0-9]{11}&#39; title=&#39;請(qǐng)輸入11位電話(huà)號(hào)碼&#39;>

Wenn Sie auf ?Senden“ klicken und die von Ihnen eingegebenen Daten nicht dem regul?ren Format im Muster entsprechen, verhindert der Browser dies Das Formular wird nicht gesendet und Sie werden aufgefordert: ?Bitte halten Sie es im Einklang mit dem angeforderten Format“ + den Inhalt im Titel (Kleingedrucktes). Beachten Sie jedoch, dass der Browser den Inhalt Ihres Textfelds nicht überprüft und das Formular direkt sendet, wenn der Inhalt Ihres Textfelds leer ist (da der Browser denkt, dass dieses Feld nicht erforderlich ist). Wenn Sie m?chten, dass dieses Feld Inhalt enth?lt, fügen Sie das erforderliche Attribut hinzu.
Durch das native HTML-Verifizierungssystem k?nnen wir grunds?tzlich unsere Einschr?nkungen bei der Formularübermittlung einhalten. Aber HTML5 bietet erweiterte Funktionen, um unsere Entwicklung zu erleichtern und die Benutzererfahrung zu verbessern.
Einschr?nkungsvalidierungs-API
Standard-Eingabeaufforderungsmeldung
Die Zeichenfolge einer Browser-Eingabeaufforderung wie ?Bitte halten Sie sich an das angeforderte Format“ ist im Eingabe-DOM in der Validierungsnachricht ausgeblendet Attribut des Objekts, dieses Attribut ist in den meisten modernen Browsern schreibgeschützt, das hei?t, es kann nicht ge?ndert werden, wie zum Beispiel der folgende Code:

<input type="text" required id=&#39;input&#39;/>

Wenn der Eingabeinhalt beim Senden vorhanden ist Wenn es leer ist, fordert der Browser auf: ?Bitte füllen Sie dieses Feld aus“. Wir k?nnen diesen Satz auf der Konsole drucken:

var input = document.getElementById('input')
input.validationMessage // =>'請(qǐng)?zhí)顚?xiě)此字段'

Wenn Sie den Inhalt ?ndern m?chten, k?nnen Sie die Schnittstelle setCustomValidity aufrufen um es zu ?ndern. Der Wert von validationMessage

input.setCustomValidity('這個(gè)字段必須填上哦');
// 下面這種做法適用于不支持setCustomValidity的瀏覽器，基本現(xiàn)代瀏覽器都不支持這樣做
input.validationMessage = '這個(gè)字段必須填上哦'

Beachten Sie, dass die native HTML-Validierung zwar wie erforderlich die Informationen ?ndern kann, die Informationen jedoch aus Gründen, die weiter unten erl?utert werden, nicht auf eine leere Zeichenfolge gesetzt werden k?nnen .
Prinzip
Das HTML-Formularvalidierungssystem verwendet das validationMessage-Attribut, um zu erkennen, ob die Daten im Textfeld die überprüfung bestehen. Wenn der Wert eine leere Zeichenfolge ist, bedeutet dies, dass die überprüfung bestanden wurde. Andernfalls bedeutet dies, dass der Browser den Wert nicht bestanden hat. Daher k?nnen Benutzer w?hrend der nativen überprüfung den Wert von validationMessage nicht auf eine leere Zeichenfolge festlegen.
Ein einfaches Beispiel für die Einschr?nkungsüberprüfungs-API
Die Einschr?nkungsüberprüfungs-API ist ein flexiblerer Ausdruck zus?tzlich zur nativen Methode. Sie k?nnen festlegen, ob die Daten übergeben werden, ohne auf regul?re Ausdrücke zurückzugreifen. Das Prinzip ist sehr einfach. Wenn Sie mit dem Datenformat zufrieden sind, rufen Sie setCustomValidity auf, um den Wert von validationMessage leer zu machen. Andernfalls rufen Sie setCustomValidity auf, um die Fehlermeldung zu übergeben:

input.addEventListener('input', function () {
        if(this.value.length > 3){ // 判斷條件完全自定義
            input.setCustomValidity('格式不正確');
        }else {
            input.setCustomValidity('')
        }
 });

Bei jeder Tastatureingabe ermittelt der Code, ob das Format korrekt ist, und ruft dann setCustomValidity auf, um den Wert von validationMessage festzulegen. Gehen Sie nicht davon aus, dass der Browser Sie jedes Mal fragt, ob das Ergebnis korrekt ist, wenn Sie auf die Schaltfl?che klicken.
Wenn Sie noch nicht darüber nachgedacht haben, werden Sie sich in diesem Fall sicherlich fragen: Warum müssen Sie Tastaturereignisse an die Eingabe binden und bei jeder Eingabe ein Urteil f?llen? Es ist gut, das Submit-Ereignis direkt an das Formular zu binden und dann beim Absenden zu beurteilen, wie gut es ist. Keine Sorge, es ist von Vorteil.
Beurteilen Sie das Format und den Stil bei der Eingabe
Als Benutzer m?chten wir natürlich, dass das Textfeld rot wird (oder andere Eingabeaufforderungen erh?lt), wenn wir wissen, dass ich das falsche Format eingegeben habe. Und jedes Mal, wenn ich ein Zeichen eingebe und es richtig ist, kehrt das Textfeld zum Normalzustand zurück. Wir k?nnen CSS-Pseudoklassen verwenden, um diese Funktion zu erreichen:

input:required {
            background-color: #FFE14D;
        }

    /*這個(gè)偽類(lèi)通過(guò)validationMessage屬性進(jìn)行判斷*/
    input:invalid {
        border: 2px solid red;
    }

上面的required偽類(lèi)會(huì)給所以必填但值空的input提供一個(gè)黃色的背景色，而下面的invalid偽類(lèi)則會(huì)為所有未通過(guò)驗(yàn)證的input添加一個(gè)2px的紅邊邊。我們現(xiàn)在給我們的Input框加上input類(lèi)即可。
這些偽類(lèi)的判斷條件正與瀏覽器判斷你能否提交表單的條件一樣，看validationMessage里的值，所以，我們上面設(shè)置每次鍵盤(pán)輸入事件都會(huì)觸發(fā)一次判斷從而改變CSS偽類(lèi)樣式的渲染，用意正在于此。
更好的用戶(hù)體驗(yàn)
還有一個(gè)缺點(diǎn)，就是當(dāng)一個(gè)input設(shè)置為required的時(shí)候，在初始化時(shí)，因?yàn)槠浔旧硎强盏模詉nvalid偽類(lèi)會(huì)對(duì)它起作用，這不是我們想看到的，因?yàn)槲覀兪裁催€都沒(méi)有干。
我們可以并在這些偽類(lèi)前加上父選擇器.invalid，這樣，只有在父元素具有invalid類(lèi)時(shí)，這些偽類(lèi)才會(huì)起作用?？梢栽O(shè)置一個(gè)submit事件，在表單提交因驗(yàn)證失敗后，會(huì)觸發(fā)input的invalid事件，給form添加invalid類(lèi)：
form.addEventListener('invalid'， function() {this.className = 'invalid'}， true)因?yàn)閕nvaild是Input的事件，而不是form的事件，所以這里我們?cè)O(shè)置第三個(gè)參數(shù)為true采用事件捕獲的方式處理之。這樣，就大功告成了。
最終實(shí)例
好了，現(xiàn)在是時(shí)候總結(jié)一下我們所學(xué)的知識(shí)并創(chuàng)造最佳實(shí)踐了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <style>
        input:required{
            background-color: #DCD4CE;
        }
        .invalid input:invalid{
            border: 2px solid red;
        }
    </style>
</head>
<body>
<form id="form">
    <label>email:<input type="email" required id="email"></label>
    <label>IDCard:<input required id="IDCard"></label>
    <input type="submit" id="submit">
</form>
<script>
    var email = document.getElementById(&#39;email&#39;);
    var IDCard = document.getElementById(&#39;IDCard&#39;);
    var form = document.getElementById(&#39;form&#39;);

    IDCard.addEventListener(&#39;input&#39;, function () {
        if(this.value.length != 6) {
            this.setCustomValidity(&#39;IDCard的長(zhǎng)度必須為6&#39;)
        }else{
            this.setCustomValidity(&#39;&#39;)
        }
    });

    form.addEventListener(&#39;invalid&#39;, function () {
        this.className = &#39;invalid&#39;;
    }, true)
</script>
</body>
</html>

運(yùn)行后截圖如下：

以上就是HTML5利用約束驗(yàn)證API來(lái)檢查表單的輸入數(shù)據(jù)的代碼實(shí)例?的內(nèi)容，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)（www.miracleart.cn）！