Partage

[Regex] Comment écrire un pattern?

[FORMULAIRE]

Sujet résolu

2 avril 2020 à 15:42:01

Bonjour,

Je dois créer 2 champs(Prénom, Nom) dans un formulaire, Ces deux champs sont obligatoires, ne doivent contenir que des lettres, des espaces et des apostrophes. Ils sont composés de deux caractères au minimum et ne peuvent compter plus de 25 caractères

Je pense avoir utilisé le bon regex --> [a-zA-Z \']+{2,25}$ dans l'attribut pattern mais cela ne fonctionne pas.

<label for="prenom" style = "display: inline-block; width: 200px;"> Prénom : </label>
		<input type = "text" placeholder="Saisir votre prénom" name="prenom" id="prenom" required="required" pattern="[a-zA-Z \']+{2,25}$" style="width: 200px;"/><br/><br/>
		<label for="nom" style = "display: inline-block; width: 200px;"> Nom : </label>
		<input type = "text" placeholder="Saisir votre nom" name="prenom" id="nom" required="required" pattern="[a-zA-Z \']+{2,25}$" style="width: 200px;"/><br/><br/>

Voici le code au complet:

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Fruits</title>
</head>

<body style="font-family: arial;">
	<form method = "post" action="#">
		<fieldset style ="width: 500px; margin-left: auto; margin-right: auto;">
		<legend>Créer un compte</legend>
		<br/>
		<label for="prenom" style = "display: inline-block; width: 200px;"> Prénom : </label>
		<input type = "text" placeholder="Saisir votre prénom" name="prenom" id="prenom" required="required" pattern="[a-zA-Z \']+{2,25}$" style="width: 200px;"/><br/><br/>
		<label for="nom" style = "display: inline-block; width: 200px;"> Nom : </label>
		<input type = "text" placeholder="Saisir votre nom" name="prenom" id="nom" required="required" pattern="[a-zA-Z \']+{2,25}$" style="width: 200px;"/><br/><br/>
		<label for="mail" style = "display: inline-block; width: 200px;"> Adresse mail : </label>
		<input type = "text" placeholder="Saisir votre adresse mail" name="mail" id="mail" required="required" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" style="width: 200px;"/><br/><br/>
		<label for="pass1" style = "display: inline-block; width: 200px;"> Mot de passe : </label>
		<input type = "password" placeholder="Saisir votre mot de passe" name="pass1" id="pass1" required="required" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*\W).{8,}$"  title="Le mot de passe doit contenir au moins un chiffre, une majuscule, une minuscule, un caractère sprécial et compter au moins huit caractères." style="width: 200px;" /><br/><br/>
		<label for="pass2" style = "display: inline-block; width: 200px;"> Confimation mot de passe : </label>
		<input type = "password" placeholder="Confirmer votre mot de passe" name="pass2" id="pass2" required="required" style="width: 200px;" /><br/><br/><br/>
		
		<div style = "text-align: center;">
			<input type = "submit" value = "Valider" style = "font-size: 20px; width: 150px;"/>
		</div>
		</fieldset>
	</form>
	<script>
	
	var pass1 = document.getElementById("pass1");
	var pass2 = document.getElementById("pass2");

	function validatePassword(){
		if(pass1.value != pass2.value) {
			pass2.setCustomValidity("Les mots de passe sont différents");
		} else {
			pass2.setCustomValidity('');
		}
	}
	pass1.onchange = validatePassword;
	pass2.onkeyup = validatePassword;
	</script>
</body>
</html>

-
Edité par AbcAbc6 3 avril 2020 à 16:48:48

Lartak

2 avril 2020 à 16:18:42

Bonjour.

Pour rappel, la pré-validation HTML faite par le navigateur, ne remplace nullement la validation des données niveau serveur.

Par conséquent inutile de vouloir faire des vérifications autant poussées niveau HTML, de plus que tes regex sont fausses, tous les prénoms et noms ne sont pas de simples chaînes de caractères constituées de lettres et d'espace(s), pour les prénoms il y en a qui ont des accents, des traits d'unions (tout comme pour les noms pour ce dernier).

Par conséquent utiliser les bons types d'input selon les données est une chose afin de faire une pré-validation, mais le gros de la vérification des données doit être faîte niveau serveur et non client.

-
Edité par Lartak 2 avril 2020 à 16:19:17

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

JeanPhilippe28

2 avril 2020 à 16:21:41

Heu a vrai dire c'est un devoir fait pas un prof dans la decouverte de html donc bien que ca soit faux faut que je le fasse comme ca.

AbcAbc6

2 avril 2020 à 16:24:34

Bonjour, C'est le 132ièm sujet avec ce titre, merci de modifier votre titre et d'être plus explicite dans celui-ci.

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Formulaire)

Lartak

2 avril 2020 à 16:41:49

Et le JavaScript il est là pour quoi alors, si le code n'est censé ne porter que sur le HTML (tu me répondra quand tu auras changé le titre comme demandé par AbcAbc6) ?

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

JeanPhilippe28

2 avril 2020 à 16:42:44

Titre changé. Et pour info' tout le code que tu vois là Lartak a été donné par le prof j'y peux rien, je ne fais que suivre les consignes, j'ai repris le corps du code qu' on ma donné en me demandant de rajouter un champ nom et prenom avec des restriction dessus.

-
Edité par JeanPhilippe28 2 avril 2020 à 16:46:57

AbcAbc6

2 avril 2020 à 16:52:10

Bonjour,

Indice : Le + dans la regex juste après les caractères autorisé il sert à quoi?

Pourquoi échapper le caractère ' ? Il ne me semble pas que ce soit un caractère réservé.

Tu as des erreurs dans ton formulaire, deux name identique.

Concernant le <br> c'est un retour ligne point. Rien d'autre, un <br> ne sert pas à créer des espacements entre les éléments pour ce faire il existe les padding et margin en CSS. Donc plusieurs <br> consécutif n'ont aucun sens.

JeanPhilippe28

2 avril 2020 à 18:41:08

Le + permet de dire qu on peut répété les éléments il me semble. D'accord j'enleve le / alors. J'ai corrigé le name merci. Oui pour la balise <br> je sais que c est pas bien de faire ca mais ca marche je modifirai plus tard. Ca change pas que mon regex ne marche toujours pas :/

AbcAbc6

2 avril 2020 à 19:25:37

>> Le + permet de dire qu on peut répété les éléments il me semble.

exact, Ce quantificateur correspond à ce qui le précède, répété une ou plusieurs fois. Et tu souhaites qu'il soit répéter combien de fois?

Autrement dit combien de fois le pattern doit être répété?

Quel est ton code du pattern actuellement ?

PS: je viens de me rendre comptes que dans mes test je n'ai pas tenu compte de l'espace.

Question : l'espace dans ton exercice c'est le caractère d'espacement uniquement ou tous les espace (espace, tabulation, retour-chariot, etc..)

PS2 : j'ai modifié le titre du sujet qui me parais plus parlant de cette façon.

-
Edité par AbcAbc6 2 avril 2020 à 19:28:50

JeanPhilippe28

3 avril 2020 à 15:31:34

Heu il me semble que le + permet de répéter plusieurs fois une lettre un espace ou un ' dans ce cas la, par exemple si l’utilisateur à plusieurs "a" dans son prénom. Moi ce qui m’embête c'est qu il ne respecte pas les 2 caractères minimum et 25 max. D'acc pour le titre !

-
Edité par JeanPhilippe28 3 avril 2020 à 15:32:32

AbcAbc6

3 avril 2020 à 16:42:03

>> Moi ce qui m’embête c'est qu il ne respecte pas les 2 caractères minimum et 25 max.

c'est parce que tu répète le motif une ou plusieurs fois.....

J’essaie de savoir ou tu as des difficultés de compréhension, pas facile... On reprends un peut de théorie :

Avec ce motif [a-zA-Z] que ce passe t'il? Tu sais que le motif autorise les caractères indiquer à savoir un groupe de lettre compris entre le a et z idem pour les majuscules. Combien de fois le motif est autorisé dans la regex? Une et une seul fois. Combien de caractère l'utilisateur pourra entrer dans le formulaire un et un seul.

Ajoutons un quantificateur + : le motif ne change pas, la regex devient [a-zA-Z]+ Qu'est ce que cela signifie? Une répétition du motif une ou plusieurs fois. Que ce passe t'il? Combien de fois le motif est autorisé dans la regex? Une ou plusieurs fois. Combien de caractère l'utilisateur peut entrer? Minimum un et un maximum indéfini. C'est identique à [a-zA-Z]{1,}

Jusque la c'est OK. Je ne t'ai pas perdu? C'est ce que tu souhaites? NON, tu souhaites un minimum de 5 et maximum de 25 donc [a-zA-Z]{5,25}

Continue l'exercice au départ de cette regex : [a-zA-Z]{5,25} Il te reste à ajouté d'abord une apostrophe et ensuite si c'est OK l'espace. Utilise ton moteur de recherche favoris pour savoir comment faire.

Il faut procédé par étape successive, si tu ne maitrise pas bien les regex (ce qui est mon cas). Écrit une condition et teste la, si c'est OK tu passe à l'écriture de la condition suivante pas avant.

Et donne la regex que tu écris, de cette façon je sais voir ou tu bloques.

-
Edité par AbcAbc6 3 avril 2020 à 16:54:02

JeanPhilippe28

3 avril 2020 à 17:41:06

Ah ouiiii j'suis con je me contredis avec le +.... Ducoup c'est ca [a-zA-Z ']{2,25}$

Merci beaucoup à toi d'avoir consacré du temps pour me faire voir quelque chose de logique, je me sens bête haha.

-
Edité par JeanPhilippe28 3 avril 2020 à 17:44:42

AbcAbc6

3 avril 2020 à 18:09:48

hummm ça passe mais d’après mes recherches ce n'est pas tout à fait cela, l'espace devrait être encodé en hexadécimal.

Voici la regex que j'ai trouvé : pattern="[a-zA-Z'\x20]{2,25}"

Le $ de fin n'est pas obligatoire ici puisque tu n'as qu'un motif.

Maintenant que tu as compris le fonctionnement tu peux corriger pour avoir un pattern cohérent en fonction des remarques de Lartak plus haut.

Corrige également la regex de l'adresse mail, elle est fausse ou plutôt exactement obsolète, tu ne permet pas les adresse des noms de domaine dont le TLD est .museum .paris .info .brussels et autre de plus de trois caractères, c'est révolu ce temps la !!

Passe ton sujet en résolu si c'est le cas. Bonne continuation.

-
Edité par AbcAbc6 3 avril 2020 à 18:11:17