Validation de formulaire HTML5 plus heureuse dans Vue

input:invalid {} de CSS est utile lorsque l'élément de formulaire n'est pas valide, mais l'expérience utilisateur est médiocre lors de l'utilisation directement. Par exemple, un style non valide s'affiche immédiatement lorsqu'un formulaire se charge, ce qui confond l'utilisateur. Par conséquent, cette utilisation est rare dans les applications pratiques. Cependant, si ce problème est évité, :invalid peut jouer un rôle énorme dans la validation de la forme sans s'appuyer sur de grandes bibliothèques.

Dave a proposé une amélioration basée sur l'idée originale de 2017:

 <code>form.errors :invalid { outline: 2px solid red; }</code>

Le style d'erreur natif n'est appliqué qu'après avoir confirmé que le formulaire est dans un état d'erreur et errors est ajoutée. Les tests sont également faciles. Par exemple, vous pouvez appliquer ce cours lorsque le bouton Soumettre est cliqué:

 <code>submitButton.addEventListener("click", (e) => { form.classList.toggle("errors", !form.checkValidity()) });</code>

Il peut également être appliqué lorsque la boîte d'entrée perd le focus ou à d'autres moments. Vous pouvez même envelopper chaque case d'entrée dans un emballage et changer la classe Wrapper, le cas échéant.

Dave applique cette idée à Vue:

Nous définissons errors sur false lors de l'initialisation du composant de formulaire car nous ne voulons pas que le mauvais style soit affiché avant que l'utilisateur ne soumette le formulaire. La fonction invalidateForm définit simplement this.error sur true . C'est l'un des inconvénients CSS :invalid , il est trop urgent. En écoutant l'événement invalid , l'application des styles peut être retardée avant la première tentative de soumission de formulaire, nous savons qu'il y a une erreur dans le formulaire.

Cette approche ne nécessite pas de bibliothèques supplémentaires, faisant pleinement usage des fonctionnalités natives de la validation du formulaire HTML. Le lien suivant est une version améliorée qui affiche également un message d'erreur:

Lien direct →

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!