Vérifier le contenu d'un champ avec regex

Résolu/Fermé
Southstyle Messages postés 46 Date d'inscription mardi 17 avril 2012 Statut Membre Dernière intervention 26 mars 2021 - 8 mars 2016 à 12:38
Southstyle Messages postés 46 Date d'inscription mardi 17 avril 2012 Statut Membre Dernière intervention 26 mars 2021 - 8 mars 2016 à 19:55
Bonjour,

J'aimerais vérifier que le champ d'un formulaire commence par au moins 4 chiffres, et se termine par un nom d'au moins deux lettres, le tout séparé par un espace.

En gros, le numéro postal et le nom de la ville. Exemples valides :
1211 Genève
1680 Romont
9434 Au
etc.

Je suppose que je dois utiliser regex, non ?

J'aimerais le vérifier onkeyup (et le champ devient vert) et onblur (car parfois les utilisateurs ont copié-collé un terme ou utilisent des modules remplissant les formulaires tout seul, comme Lazarus par exemple.

Merci pour votre aide et bonne semaine !

2 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
8 mars 2016 à 14:17
Salut,

Tu vas effectivement devoir utiliser une expression régulière.

En html5 le plus simple est d'utiliser l'attribut pattern : https://www.w3schools.com/tags/att_input_pattern.asp

Attention, la vérification coté client ne substitue pas la vérification coté serveur.

Bonne journée,
2
Southstyle Messages postés 46 Date d'inscription mardi 17 avril 2012 Statut Membre Dernière intervention 26 mars 2021
8 mars 2016 à 17:04
Bonjour,

C'est génial, je ne connaissais pas du tout l'attribut "pattern". Je vais me pencher davantage sur ce sujet car ça peut être super intéressant (notamment pour retourner un message dans la langue du navigateur de l'utilisateur).
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
8 mars 2016 à 14:36
Bonjour,

Et côté regex, tu dois pouvoir utiliser ceci :

^(\d{4} [a-zA-Zéèùàïô]*)$

https://regex101.com/r/nD0tD2/1

var reg=new RegExp("^(\d{4} [a-zA-Zéèùàïô]*)$","g"); 
var result = reg.test(tontexte); //retourne true ou false


2
Southstyle Messages postés 46 Date d'inscription mardi 17 avril 2012 Statut Membre Dernière intervention 26 mars 2021
8 mars 2016 à 17:03
Bonjour,

Tout d'abord merci pour votre réponse.

Ensuite j'ai essayé d'adapter votre solution à mon code source, et je n'arrive pas à le faire fonctionner :
<script type="text/javascript">
var npalieu=new RegExp("^(\d{4} [a-zA-Záàâäéèêëíìïîóòöôúùûü]*)$","g");
</script>
<input onkeyup="if(npalieu.test(this.value) = true) { this.style.backgroundColor='#CFC'; } else { this.style.backgroundColor='#FCC'; }" id="monchamp">

Lorsque je tape "1234 Abcd" le champ reste en rouge, donc non validé.
Vous arrivez à voir où est l'erreur ?
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > Southstyle Messages postés 46 Date d'inscription mardi 17 avril 2012 Statut Membre Dernière intervention 26 mars 2021
8 mars 2016 à 17:17
heu... évite de mettre du javascript DIRECTEMENT dans le onkeyUp
préfère le mettre dans une fonction appellé via le onkeyup

comme ceci :
<input onkeyup="testChamp(this);" id="monchamp">

function testChamp(elm){
  var npalieu=new RegExp("^(\d{4} [a-zA-Záàâäéèêëíìïîóòöôúùûü]*)$","g"); 
  var valeur = elm.value;
  if(npalieu.test(valeur) && valeur !="" ){
    elm.style.backgroundColor='#CFC'; 
  }else{
   elm.style.backgroundColor='#FCC';
  }
}
0
Southstyle Messages postés 46 Date d'inscription mardi 17 avril 2012 Statut Membre Dernière intervention 26 mars 2021
8 mars 2016 à 18:02
"elm" dans votre exemple correspond à l'ID de mon champ, n'est-ce pas ?
Si oui, ça ne marche toujours pas.

Est-ce que vous êtes bien sûr que l'expression régulière retournera TRUE dans les cas suivants :
1211 Genève
1700 Fribourg
et
9434 Au ?

Car quand je teste, mon champ reste toujours en rouge.
Dans le <head> j'ai mis la fonction :
<script type="text/javascript">
function testChamp(monChamp) {
var npalieu=new RegExp("^(\d{4} [a-zA-Záàâäéèêëíìïîóòöôúùûü]*)$","g");
var valeur = monChamp.value;
if(npalieu.test(valeur) && valeur !="" ) {
monChamp.style.backgroundColor='#CFC';
} else {
monChamp.style.backgroundColor='#FCC';
}
}
</script>

Puis mon champ se présente comme suit :
<input onkeyup="testChamp(this);" onblur="testChamp(this);" id="monChamp" />
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > Southstyle Messages postés 46 Date d'inscription mardi 17 avril 2012 Statut Membre Dernière intervention 26 mars 2021
8 mars 2016 à 18:05
As tu été voir le lien que je t'ai donné ?
A la limite ... ajoute le "i" pour le rendre insensible à la casse
var npalieu=new RegExp("^(\d{4} [a-zA-Záàâäéèêëíìïîóòöôúùûü]*)$","gi"); 
0
Southstyle Messages postés 46 Date d'inscription mardi 17 avril 2012 Statut Membre Dernière intervention 26 mars 2021
8 mars 2016 à 18:06
J'ai vérifié votre expression régulière avec le lien que vous aviez mis dans votre premier commentaire, et elle semble être correcte.
J'ai juste adapté comme ceci :
^(\d{4} [a-zA-Zéèùàïô]{2,})$
(afin que le nom de la ville / village ait au minimum 2 lettres)

Donc l'erreur doit être ailleurs.
0