Confirmation du mot de passe

<div id="app">
  <div>
    <p><label>Mot de passe <input v-model="mdp" type="password" autocomplete="new-password"
       aria-describedby="regle"></label></p>
    <p id="regle">12 caractères au moins.</p>
    <p><label>Confirmation <input v-model="confirmation" type="password" autocomplete="new-password"
       :aria-invalid="erreur ? 'true' : null" aria-describedby="erreur-mdp"></label></p>
    <p id="erreur-mdp" aria-live="polite">{{ erreur }}</p>
  </div>
</div>

const { createApp, ref, computed } = Vue;

createApp({
  setup() {
    const mdp = ref("");
    const confirmation = ref("");
    const erreur = computed(() => {
      if (mdp.value.length > 0 && mdp.value.length < 12) return "Le mot de passe est trop court.";
      if (confirmation.value && confirmation.value !== mdp.value) return "Les deux mots de passe diffèrent.";
      return "";
    });
    return { mdp, confirmation, erreur };
  },
}).mount("#app");

Après « campus2026 » (10 caractères) dans le premier champ, le message ; puis après avoir complété le premier en « campus2026!! » et tapé « campus2026! » dans le second ; puis après un dernier « ! » dans le second :

Le mot de passe est trop court.
Les deux mots de passe diffèrent.
""

aria-live="polite" fait annoncer chaque changement du message ; aria-describedby le fait lire en arrivant sur le champ. Les deux champs ont autocomplete="new-password", qui permet au navigateur de proposer un mot de passe solide.