Vee Validate

Installation

yarn add vee-validate

ES6+

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import { ValidationProvider, ValidationObserver } from 'vee-validate'

import './local/vee-validate'

// Enregistrement global
Vue.component('ValidationObserver', ValidationObserver)
Vue.component('ValidationProvider', ValidationProvider)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Configuration

import { extend, configure } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'
import { messages } from 'vee-validate/dist/locale/fr.json'

// Ajout d'une règle personnalisée
extend('motSecret', {
  validate: valeur => valeur === 'exemple',
  message: 'Ce n\'est pas le mot magique'
})

extend('positif', {
  validate: valeur => valeur > 0,
  message: 'Veuillez entrer une valeur supérieure à 0'
})

extend('impair', valeur => {
  return valeur % 2 !== 0
})

extend('longueurMinimale', {
  validate: (valeur, argument) => {
    return valeur.length > argument.longueur
  },
  params: ['longueur'],
  message: (nomChamp, placeholders) => {
    return `${nomChamp} doit contenir plus de ${placeholders.longueur} caractères`
  }
})

// Extension de toutes les règles existantes avec des messages français
Object.keys(rules).forEach(regle => {
  extend(regle, {
    ...rules[regle],
    message: messages[regle]
  })
})

// Configuration des classes CSS
configure({
  classes: {
    valide: 'est-valide',
    invalide: 'est-invalide',
    modifie: ['est-modifie', 'a-ete-modifie']
  }
})

Code SourceExemple 1

Utilisation des composants principaux ValidationObserver et ValidationProvider

Gestion de la soumission et réinitialisation du formulaire

<template>
  <div id="application">
    <div class="conteneur-layui">
      <validation-observer v-slot="{ soumettreForm, reinitialiser }">
        <form
          class="formulaire-layui formulaire-panneau"
          @submit.prevent="soumettreForm(envoyerFormulaire)"
          @reset.prevent="reinitialiser"
        >
          <div class="element-formulaire">
            <validation-provider rules="required|email" v-slot="{ erreurs }">
              <label class="etiquette-formulaire">Nom d'utilisateur</label>
              <div class="inline-entree">
                <input
                  type="text"
                  name="Nom d'utilisateur"
                  v-model.trim="utilisateur"
                  class="entree-layui"
                  placeholder="Veuillez entrer"
                />
              </div>
              <div class="erreur">{{ erreurs[0] }}</div>
            </validation-provider>
          </div>
          <div class="element-formulaire">
            <validation-provider rules="required" v-slot="{ erreurs }">
              <label class="etiquette-formulaire">Mot de passe</label>
              <div class="inline-entree">
                <input
                  type="password"
                  name="Mot de passe"
                  v-model="motPasse"
                  class="entree-layui"
                  placeholder="Veuillez entrer"
                />
              </div>
              <div class="erreur">{{ erreurs[0] }}</div>
            </validation-provider>
          </div>
          <div class="element-formulaire">
            <validation-provider rules="required" v-slot="{ erreurs }">
              <label class="etiquette-formulaire">Code de vérification</label>
              <div class="inline-entree">
                <input
                  type="text"
                  name="Code de vérification"
                  v-model="codeVerif"
                  class="entree-layui"
                />
              </div>
              <div
                class="milieu-formulaire svg"
                v-html="captcha"
                @click="genererCaptcha"
              ></div>
              <div class="erreur">{{ erreurs[0] }}</div>
            </validation-provider>
          </div>
          <button class="bouton-layui" :class="{ 'bouton-desactive': invalide }">
            Connexion
          </button>
          <button class="bouton-layui" type="reset">Réinitialiser</button>
          <a href="javascript:void(0)" class="lien-mdp-oublie">Mot de passe oublié</a>
        </form>
      </validation-observer>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'application',
  data () {
    return {
      captcha: '', // Code de vérification
      utilisateur: '',
      motPasse: '',
      codeVerif: '',
      messagesErreur: [],
      invalide: false
    }
  },
  mounted () {
    this.genererCaptcha()
  },
  methods: {
    envoyerFormulaire () {
      console.log('Formulaire soumis')
    },
    genererCaptcha () {
      axios.get('http://localhost:3000/genererCaptcha').then(reponse => {
        if (reponse.status === 200) {
          if (reponse.data.code === 200) {
            this.captcha = reponse.data.donnees.svg
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#application {
  background-color: #f2f2f2;
}
.conteneur-layui {
  background-color: #fff;
}
input {
  width: 190px;
}
.lien-mdp-oublie {
  margin-left: 10px;
  &:hover {
    color: #009688;
  }
}
.svg {
  position: relative;
  top: -15px;
}
</style>

Code SourceExemple 2

Utilisation des références ($refs)

<template>
  <div id="application">
    <div class="conteneur-layui">
      <validation-observer ref="formulaire">
        <form @submit.prevent="envoyerFormulaire">
          <div class="element-formulaire">
            <validation-provider rules="required|email" v-slot="{ erreurs }">
              <label class="etiquette-formulaire">Nom d'utilisateur</label>
              <div class="inline-entree">
                <input
                  type="text"
                  name="Nom d'utilisateur"
                  v-model.trim="utilisateur"
                  class="entree-layui"
                  placeholder="Veuillez entrer"
                />
              </div>
              <div class="erreur">{{ erreurs[0] }}</div>
            </validation-provider>
          </div>
          <div class="element-formulaire">
            <validation-provider rules="required" v-slot="{ erreurs }">
              <label class="etiquette-formulaire">Mot de passe</label>
              <div class="inline-entree">
                <input
                  type="password"
                  name="Mot de passe"
                  v-model="motPasse"
                  class="entree-layui"
                  placeholder="Veuillez entrer"
                />
              </div>
              <div class="erreur">{{ erreurs[0] }}</div>
            </validation-provider>
          </div>
          <div class="element-formulaire">
            <validation-provider rules="required" v-slot="{ erreurs }">
              <label class="etiquette-formulaire">Code de vérification</label>
              <div class="inline-entree">
                <input
                  type="text"
                  name="Code de vérification"
                  v-model="codeVerif"
                  class="entree-layui"
                />
              </div>
              <div
                class="milieu-formulaire svg"
                v-html="captcha"
                @click="genererCaptcha"
              ></div>
              <div class="erreur">{{ erreurs[0] }}</div>
            </validation-provider>
          </div>
          <button class="bouton-layui" :class="{ 'bouton-desactive': invalide }">
            Connexion
          </button>
          <a href="javascript:void(0)" class="lien-mdp-oublie">Mot de passe oublié</a>
        </form>
      </validation-observer>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'application',
  data () {
    return {
      captcha: '', // Code de vérification
      utilisateur: '',
      motPasse: '',
      codeVerif: '',
      messagesErreur: [],
      invalide: false
    }
  },
  mounted () {
    this.genererCaptcha()
  },
  methods: {
    envoyerFormulaire () {
      this.$refs.formulaire.valider().then(valide => {
        if (!valide) {
          return
        }

        this.utilisateur = ''
        this.motPasse = ''
        this.codeVerif = ''
        this.$nextTick(() => {
          this.$refs.formulaire.reinitialiser()
        })
      })
    },
    genererCaptcha () {
      axios.get('http://localhost:3000/genererCaptcha').then(reponse => {
        if (reponse.status === 200) {
          if (reponse.data.code === 200) {
            this.captcha = reponse.data.donnees.svg
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#application {
  background-color: #f2f2f2;
}
.conteneur-layui {
  background-color: #fff;
}
input {
  width: 190px;
}
.lien-mdp-oublie {
  margin-left: 10px;
  &:hover {
    color: #009688;
  }
}
.svg {
  position: relative;
  top: -15px;
}
</style>

Code Source