Explication détaillée de l'utilisation de l'attribut pattern en HTML5

Lorsque je travaillais récemment sur une page mobile, j'ai rencontré un problème avec le clavier pour la saisie numérique. L'approche précédente consistait à utiliser type="tel" à tous les niveaux, mais j'ai toujours eu l'impression que les lettres anglaises sur le Jiugongge. Le clavier du numéro de téléphone était trop obstructif. J'ai donc voulu essayer d'autres solutions de mise en œuvre, mais la conclusion finale était frustrante. Cependant, j’en ai aussi profité pour en apprendre davantage sur l’attribut du motif.

La différence entre type="tel" et type="number"

Permettez-moi d'abord de vous expliquer les premiers problèmes rencontrés. En fait, ni le téléphone ni le numéro ne sont parfaits :

type="tel"

L'avantage est que les performances du clavier d'iOS et de Android sont similaires

L’inconvénient est que ces lettres sont tellement redondantes. Même si je ne souffre pas de trouble obsessionnel-compulsif, cela me fait quand même bizarre.

type="number"

L'avantage est un vrai clavier numérique implémenté sous Android

Inconvénient 1 : Il n'y a pas de clavier à grille à neuf carrés sur iOS, ce qui rend la saisie peu pratique

Inconvénient 2 : Les anciennes versions d'Android (y compris le noyau X5 utilisé par WeChat) ont une petite queue super inutile derrière la zone de saisie Heureusement, celle-ci a été supprimée depuis Android 4.4.4.

Mais pour le deuxième défaut, nous pouvons utiliser les pseudo-éléments privés du webkit pour le corriger :

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

l'attribut pattern

pattern est utilisé pour vérifier le contenu du entrée de formulaire, généralement L'attribut type de HTML5, tel que email, tel, numéro, classe de données, url, etc., a déjà une simple fonction de vérification du format des données, après l'ajout d'un modèle, la vérification du recto. -la partie finale devient plus simple et plus efficace.

Évidemment, la valeur d'attribut du motif doit utiliser une expression régulière.

Exemple

Vérification simple du numéro

Il existe deux vérifications du numéro :

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

Pour la vérification du formulaire , les fonctions de ces deux règles habituelles sont les mêmes, mais les performances sont très différentes :

Sous iOS, seul [0-9]* peut activer le clavier numérique à neuf carrés, d n'est pas valide

Android 4.4 et versions antérieures (y compris le type="text" fera apparaître le clavier complet au lieu du clavier numérique à neuf carrés.

Expressions régulières couramment utilisées

Les modèles sont tous utilisés de la même manière. Je n'entrerai pas dans les détails ici, je énumérerai simplement quelques expressions régulières couramment utilisées :

Carte de crédit[. 0-9]{13,16}

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

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

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

Numéro QQ : [1 -9 ][0-9]{4,14}

Numéro de portable : ^(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}$

Carte d'identité : ^([0-9 ]) {7,18}(x| Contient des lettres, des chiffres et des traits de soulignement

Mot de passe fort : ^(?=.d)(?=.[a-z])(?=.*[A-Z]).{8 ,10}$ Contient des lettres majuscules et minuscules. En combinaison avec des chiffres, les

caractères spéciaux

ne peuvent pas être utilisés et la longueur est comprise entre 8 et 10

7 caractères chinois ou 14 caractères : ^[u4e00 -u9fa5]{1,7}$| ^[dA-Za-z_]{1,14}$Malheureusement, la prise en charge du modèle par le navigateur est très mauvaise : via Puis-je utiliser

Mais si c'est comme mentionné au début de l'article. Si vous changez le clavier numérique, il n'y aura aucun problème aussi bien sur iOS que sur Android.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!