Valider une prop objet — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 5)

Valider une prop objet

Composants · niveau 3 (difficile)

Énoncé

La prop livre de CarteLivre est un objet. Écrire un validateur qui exige un ISBN de 13 chiffres, un titre non vide et un prix positif ou nul, et qui écrit dans la console la liste des défauts du livre refusé. Que voit-on dans la console avec ces trois livres ?


livres: [
  { isbn: "9782956300014", titre: "Programmation Java", prix: 32 },
  { isbn: "978-2-9563", titre: "", prix: 45 },
  { isbn: "9782956300052", titre: "Le Petit Prince", prix: -8.5 },
],

Corrigé


function livreValide(livre) {
  const erreurs = [];
  if (!/^\d{13}$/.test(livre.isbn ?? "")) erreurs.push("ISBN de 13 chiffres attendu");
  if (typeof livre.titre !== "string" || livre.titre.trim() === "") erreurs.push("titre vide");
  if (typeof livre.prix !== "number" || livre.prix < 0) erreurs.push("prix négatif ou absent");
  if (erreurs.length > 0) console.warn(`Livre refusé (${erreurs.join(", ")}) :`, JSON.stringify(livre));
  return erreurs.length === 0;
}

La console affiche, pour les deux livres refusés, la ligne écrite par le validateur suivie de l'avertissement de Vue :


Livre refusé (ISBN de 13 chiffres attendu, titre vide) : {"isbn":"978-2-9563","titre":"","prix":45}
[Vue warn]: Invalid prop: custom validator check failed for prop "livre".


Livre refusé (prix négatif ou absent) : {"isbn":"9782956300052","titre":"Le Petit Prince","prix":-8.5}
[Vue warn]: Invalid prop: custom validator check failed for prop "livre".

(chaque avertissement est suivi de la position du composant dans l'arbre). Les trois cartes s'affichent néanmoins, dont « (sans titre) — 45 € » et « Le Petit Prince — -8.5 € » : le validateur documente et alerte, il ne filtre pas. Si les données viennent d'un serveur, c'est au moment de les recevoir qu'il faut les vérifier et écarter les livres invalides.