Detaillierte Erläuterung der Verwendung des Musterattributs in HTML5

Als ich kürzlich an einer mobilen Seite arbeitete, stieß ich auf ein Problem mit der Tastatur für die numerische Eingabe. Der bisherige Ansatz bestand darin, type="tel" generell zu verwenden, aber ich hatte immer das Gefühl, dass die englischen Buchstaben auf dem Jiugongge Die Telefonnummerntastatur war zu hinderlich. Deshalb wollte ich andere Implementierungslösungen ausprobieren, aber das Endergebnis war frustrierend. Allerdings nutzte ich auch die Gelegenheit, mehr über das Attribut von Muster zu erfahren.

Der Unterschied zwischen type="tel" und type="number"

Lassen Sie mich zunächst die anfänglichen Probleme erläutern. Tatsächlich sind weder Tel noch Nummer perfekt:

type="tel"

Der Vorteil ist, dass die Tastaturleistung von iOS und Android ähnlich ist

Der Nachteil ist, dass diese Buchstaben so überflüssig sind. Obwohl ich keine Zwangsstörung habe, fühlt es sich trotzdem seltsam an.

type="number"

Der Vorteil ist eine echte numerische Tastatur, die unter Android implementiert ist

Nachteil 1: Unter iOS gibt es keine Tastatur mit neun Quadraten, was die Eingabe umständlich macht

Nachteil 2: Ältere Versionen von Android (einschließlich des von WeChat verwendeten X5-Kernels) haben einen super nutzlosen kleinen Schwanz hinter dem Eingabefeld, der seit Android 4.4.4 glücklicherweise entfernt wurde.

Aber für den zweiten Mangel können wir die privaten Pseudoelemente des Webkits verwenden, um ihn zu beheben:

input[type=number]::-webkit-inner-spin-button,  
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        appearance: none; 
        margin: 0; 
    }

Musterattribut

Muster wird verwendet, um den Inhalt des zu überprüfen Formulareingabe, normalerweise Das Typattribut von HTML5, wie z. B. E-Mail, Telefonnummer, Nummer, Datenklasse, URL usw., verfügt nach dem Hinzufügen von Mustern bereits über eine einfache Funktion zur Überprüfung des Datenformats -Endteil wird einfacher und effizienter.

Natürlich sollte der Attributwert des Musters einen regulären Ausdruck verwenden.

Beispiel

Einfache numerische Validierung

Es gibt zwei numerische Validierungen:

<input type="number" pattern="\d">  
<input type="number" pattern="[0-9]*">

Für Formularvalidierung die Funktionen von Diese beiden regulären Regeln sind gleich, aber die Leistung ist sehr unterschiedlich:

In iOS kann nur [0-9]* die Neun-Quadrat-Zifferntastatur aktivieren, d ist ungültig

Android 4.4 und niedriger (einschließlich des Typs „text“ zeigt die vollständige Tastatur anstelle der neunstelligen numerischen Tastatur an.

Häufig verwendete reguläre Ausdrücke

Muster werden alle auf die gleiche Weise verwendet. Ich werde hier nicht auf Details eingehen, sondern nur einige häufig verwendete reguläre Ausdrücke auflisten:

Kreditkarte[. 0-9]{13,16}

UnionPay Card^62[0-5]d{13,16}$

Visa: ^4[0-9]{12 }( ?:[0-9]{3})?$

MasterCard: ^5[1-5][0-9]{14}$

QQ-Nummer: [1 -9 ][0-9]{4,14}

Mobiltelefonnummer: ^(13[0-9]|14[5|7]|15[0|1|2|3|5| 6 |7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$

Ausweis: ^([0-9 ] ){7,18}(x| Enthält Buchstaben, Zahlen und Unterstriche

Starkes Passwort: ^(?=.d)(?=.[a-z])(?=.*[A-Z]).{ 8,10}$ Enthält Groß- und Kleinbuchstaben. In Kombination mit Zahlen können

Sonderzeichen

nicht verwendet werden, und die Länge liegt zwischen 8-10

7 chinesische Zeichen oder 14 Zeichen: ^[ u4e00-u9fa5]{1,7}$|. ^[dA-Za-z_]{1,14}$Leider ist die Browserunterstützung für Muster sehr schlecht: über Can I Use

Aber wenn Sie genau wie am Anfang des Artikels erwähnt die numerische Tastatur ändern, wird es sowohl auf iOS als auch auf Android kein Problem geben.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Musterattributs in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!