HTML5 verwendet die API zur Überprüfung der Codeinstanz der Eingabedaten des Formulars, um die API zu überprüfen

HTML5 hat eine große Optimierung der Formulare, sei es Semantik, kleine Komponenten oder Datenformatüberprüfung. Ich denke, Sie werden die Browserkompatibilität als Ausrede verwenden, um diese neuen Funktionen zu verwenden, aber dies sollte niemals der Grund sein, warum Sie stagnieren. durchgeführt. Wenn Sie wirklich versuchen, die neuen Funktionen dieser Formen zu verwenden, verspreche ich Ihnen, sich in sie zu verlieben. Wenn der einzige Defekt ist, wird der Stil der Eingabeaufforderung vom Browser standardmäßig geändert, okay, wenn Sie der Meinung sind Gewöhnliche Menschen als die meisten normalen Menschen, gut, wenn Sie keine Stilkompatibilität in Betracht ziehen), beeilen Sie sich einfach und die Schule!

HTML5 bietet eine große native Unterstützung für die Überprüfung des Datenformates, wie z.

 <Eingabe type = 'E -Mail'/>

Wenn Sie auf die Schaltfläche Einreichung klicken und das von Ihnen eingegebene Format keine E -Mail erfüllt, kann es nicht in der Lage sind, zu senden, und der Browser fordert Sie auf, eine Fehlermeldung zu erstellen.

Zum Beispiel unter Chrome:

1. Wenn Sie es einreichen, werden Sie die Überprüfung des Browsers auslösen

2. Verschiedene Browser -Eingabeaufforderungsinformationen sind unterschiedlich

3. Wenn mehrere Eingaben die Anforderungen nicht erfüllen, wird nur ein Fehler aufgefordert.

Denken Sie nicht, dass Sie beim Eingeben des Telefonnummer -Formats vom Browser blockiert werden, wenn Sie das Telefonnummer eingeben, und die Fehlermeldung beim Senden auffordern. Digitale Tastatur und es spielt keine Rolle bei der Datenüberprüfung.

Sie können das Musterattribut verwenden, um eine benutzerdefinierte Formatüberprüfung für den Browser festzulegen, ohne dass das Format des nativen Verifizierungsdatenformats bereitgestellt wird. Der Wert des Musterattributs ist ein regulärer Ausdruck (String):

 <Eingabe type = 'tel' muster = '[0-9] {11}' if (this.value.length> 3) {// Urteilsbedingung ist vollständig angepasst input.setCustomvalidy ('falsches Format');} else { Input.setCustomvality ('')}});

Jede Tastatureingabe bestimmt der Code, ob das Format korrekt ist, und rufen dann die SetCustomvalidität auf, um den Wert der Wertmessage festzulegen. Denken Sie nicht, dass jeder Schlüsselbrowser Ihr Ergebnis auffordert, ob das Ergebnis korrekt ist.

Wenn Sie nicht darüber nachgedacht haben, werden Sie auf jeden Fall fragen, warum Sie seitdem Tastaturereignisse für die Eingabe binden und für jede Eingabe urteilen müssen? Senden Sie den Vorfall direkt für das Formular.

Als Benutzer wird das Textfeld natürlich rot (oder es gibt andere Tipps), nachdem ich gelernt habe, dass ich das falsche Format eingegeben habe. Und jedes Mal, wenn ich ein Zeichen eingehe, kehrt das Textfeld zum Normalwert zurück. Wir können die CSS -Pseudo -Klasse verwenden, um diese Funktion zu implementieren:

 Eingabe: Erforderlich {Hintergrundfarbe: #ffe14d;} /* Diese Pseudoklasse wird über die Werting-Eigenschaft der Valuemessage beurteilt* / Eingabe: Ungültiges {Grenze: 2px Solid Red;}.

Die erforderliche Pseudo -Kategorie oben liefert eine gelbe Hintergrundfarbe für die Must -Have, aber leere Eingabe, während die ungültige Pseudo -Klasse unten eine 2px rote Seite zu allen unauflastenden Eingaben hinzufügt. Wir können jetzt die Eingabetokument zu unserem Eingangsfeld hinzufügen.

Die Urteilsbedingungen dieser Pseudo -Kategorien beurteilen, ob Sie die Form des Formulars einreichen können. -Stilstil.

Ein weiterer Nachteil besteht darin, dass bei der Initialisierung eine Eingabe auf erforderlich ist, da die ungültige Pseudo -Kategorie leer ist.

Wir können das übergeordnete Auswahlgerät vor diesen Pseudo -Kategorien hinzufügen. Sie können ein Einreichungsereignis festlegen.

Form.AdDeVentListener ('Ungültiges', Funktion () {this.className = 'Invalid'}, True) Da Invaild ein Vorfall ist, nicht das Ereignis des Formulars, setzen wir den dritten Parameter für die Verwendung von Ereigniserfassung. Auf diese Weise wurde es getan.

Nun, es ist Zeit, das Wissen zusammenzufassen, das wir gelernt haben, und die Best Practice zu schaffen:

 <! {Border: 2PX Solid Red;} </style> </head> <body> <Formular ID = Form> <Label> E -Mail: <Eingabe type = E -Mail Erforderliche ID = E -Mail> </label> <label> IDCard: < Erforderliche ID = IDCard> </label> <Eingabe type = Senden id = surven> </form> <script> var E -Mail = document.getElementById ('E -Mail'); ); } Else {this.setCustomvality ('')}});

Der Screenshot nach dem Laufen lautet wie folgt:

Das oben genannte ist der Inhalt dieses Artikels.