pixel facebook
 

Javascript | Expressions Regulieres

Ce que vous allez Apprendre

Comment valider la saisie d'un formulaire en Javascript.

Dans ce tutoriel nous expliquons le principe des expressions régulières. Ce motif nous permet de comparer ou de chercher des caractères dans un texte.

2 étapes pour cela

  1. La création de la regexp
//Ecriture Littérale
let regExp1 = /a/g;

//Ou constructeur d'objet
let regExp2 = new RegExp('a', 'g');
  1. Le test de la regexp appliqué au texte
let prenom = 'gael';

// fonction de test -> retourne un booleen
let testRegExp = regExp2.test(prenom);

//Test de la valeur de retour
if( testRegExp ) {
  console.log('le texte contient un A');
}

Exemple avec le test d'une validation d'un format d'email

//Création de l'expression régulière
let emailRegExp = new RegExp('^[a-zA-Z0-9.-_]+[@]{1}[a-zA-Z0-9.-_]+[.]{1}[a-z]{2,10}$', 'g');

//Test de l'expression
if (emailRegExp.test('toto@gmail.com')) {
  alert('email valide');
}
Pour Aller Plus Loin
Je suis intéressé(e)
par ce chapitre

Télécharger les fichiers sources

Inclus

  • Le formulaire de connexion sans le Javascript, pour s’entraîner en même temps que la vidéo

  • Le formulaire de connexion avec la vérification Javascript complète

Prix = 2 €
Hors Taxes


Commentaires 2


Votre adresse mail ne sera en aucun cas divulguée ou utilisée, elle nous permet de garantir la pertinence des commentaires affichés

Thibaut - 25/04/2020 11:48:07
Bjr je suis entrain de faire un formulaire d'inscription et j'aimerai vérifié le champ prénom, voici mon code:
let form = document.querySelector('#inscription');
let small = document.getElementById('erreur');

// functions validation
const validFirstname = function(inputFirstname){
// Reg pour validation firstname
let firstNameRegExp =/[a-zA-Z0-9]{4,12}/g;
let testFirstname = firstNameRegExp.test(inputFirstname);
if(testFirstname){
small.innerHTML = 'Prenom valide'
}else{
small.innerHTML = 'Prenom nonvalide'
}
};

form.firstname.addEventListener('change', function(){
validFirstname(this);
})
le probleme est qu'il me donne toujours un true même si le prenom à moins de 4 caractère, biza
Thibaut - 19/04/2020 20:56:21
Good vidéo; merci bcup!