Le composant Vue.js validation du modèle d'entrée html ne fonctionne pas

Question

Donc j'essaie de créer des formulaires html qui utilisent l'attribut 'pattern' de l'entrée html, mais quand je le fais avec les composants de Vue.js, cela crée un comportement très étrange. Voici un violon à démontrer.

Vue.component('test', { 
template:`<input type="text" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}" 
title="Must contain at least one number and one uppercase and lowercase letter, and be between 8 and 16 characters."/>` 
}) 

jsfiddle Demo

Répartition des motifs regex here (regex101 example).

Maintenant pour la vie de moi, je ne peux pas comprendre pourquoi la version normale valide correctement, mais la version Vue ne fonctionne pas.

Answer 1

Votre entrée Vue manque d'une barre oblique inverse sur le modèle \d. Le simple \ est interpolé, vous devez donc le doubler.

Escaping in template literals

La barre oblique inverse est utilisé pour échapper à l'intérieur de littéraux de modèle.