web-dev-qa-db-fra.com

Comment autoriser uniquement les nombres à 4 chiffres dans la zone de texte html?

J'ai essayé de limiter les utilisateurs dans la zone de texte HTML pour insérer uniquement des nombres de 4 chiffres de 0 à 9.

J'ai essayé comme suit mais cela n'autorise que les nombres à deux chiffres. 

<input type="text"  name="pincode" maxlength="4"  id="pin" pattern="^0[1-9]|[1-9]\d$" required/>
htmlregex
7
Nur Selam

Permettez-moi de préciser: les ^[0-9]{4}$ ou ^\d{4}$ sont des expressions rationnelles valides pour limiter les valeurs à 4 chiffres uniquement. Cependant, pattern HTML5 attribut value est déjà ancré par défaut:

Le langage d’expression régulière utilisé pour cet attribut est le même que celui utilisé en JavaScript, sauf que l’attribut pattern correspond à la valeur entière, pas à n’importe quel sous-ensemble (un peu comme s’il impliquait un ^(?: au début du motif et un )$ à la fin).

Donc, utilisez juste pattern="\d{4}":

input:valid {
  color: green;
}
input:invalid {
  color: red;
}
<form name="form1"> 
 <input type="text"  name="pincode" maxlength="4"  id="pin" pattern="\d{4}" required/>
 <input type="Submit"/> 
</form>

Au fait, votre modèle ^0[1-9]|[1-9]\d$ ne correspond qu'à 2 entrées car il correspond soit à 0 suivi de tout chiffre compris entre 1 et 9, ou de tout chiffre compris entre 1 et 9 suivi d'un chiffre.

Notez également que l'attribut pattern="\d{4}" n'empêche pas la saisie de symboles non numériques dans le champ. Voir Comment éviter que des caractères non valides ne soient saisis dans les champs de saisie post comment résoudre ce problème.

15
Wiktor Stribiżew

S'il vous plaît essayez d'ajouter ce qui suit:

<input type="text" 
       maxlength="7" 
       onkeypress='return event.charCode >= 48 && event.charCode <= 57'    
       required 
/>
4
Khaleel Hmoz

Changez votre regex comme ceci:

pattern="\d{4}"
# allows numbers from 0000-9999

pattern="[1-9][0-9]{3}"
# from 1000-9999

Un modèle tel que {1,4} permet des nombres de 1 à 4 chiffres, un modèle tel que {x} fixe le nombre de chiffres à x fois.

Edit: Comme @Tushar l'a fait remarquer, l'ancien regex [1-9]{4} était erroné car il ne permettait pas de zéros.

4
Jan

Changez votre motif comme ci-dessous,

pattern = "^[0-9]{4}$"

Le quantificateur de répétition {4} doit répéter le jeton précédent exactement 4 fois.

2
Avinash Raj
pattern="\d{4}"

autorise les numéros de 0000 à 9999

pattern="[1-9][0-9]{3}"

autorise les numéros de 1000 à 9999

Un modèle tel que {1,4} permettrait des nombres de 1 à 4 chiffres. Un modèle tel que {x} fixe le nombre de chiffres à x fois.

0
user9522383