web-dev-qa-db-fra.com

Vuejs 2 + validation du formulaire

Depuis vue-validator https://github.com/vuejs/vue-validator est prêt pour Vuejs 2, quel est le meilleur moyen d'implémenter la validation frontale?

UPDATE J'ai trouvé ce plugin génial Vee Validate

javascriptformsvalidationvue.jsvuejs2
17
Tiago Matos

À mon avis, un bon moyen d'implémenter la validation frontale pour VueJS consiste à utiliser vuelidate .

C'est très simple à utiliser et puissant. Il offre une validation de base de modèle, cela signifie que c'est ce que vous définissez dans les données qui sont validées, de sorte qu'il est totalement découplé des modèles. Il est livré avec des validateurs intégrés communs pour le courrier électronique, la longueur minimale et maximale ou requis. Et plein d'autres.

3
jpeg

Comme il s’agit finalement de Javascript, vous pouvez également utiliser certaines des bibliothèques de validation Javascript existantes telles que Parsely.js ou Validate.js pour le connecter. Une chose intéressante avec la bibliothèque Validate.js est que son format peut facilement être stocké dans le magasin global si vous utilisez Vuex:

var constraints = {
  creditCardNumber: {
    presence: true,
    format: {
      pattern: /^(34|37|4|5[1-5]).*$/,
      message: function(value, attribute, validatorOptions, attributes, globalOptions) {
        return validate.format("^%{num} is not a valid credit card number", {
          num: value
        });
      }
    },
    length: function(value, attributes, attributeName, options, constraints) {
      if (value) {
        // Amex
        if ((/^(34|37).*$/).test(value)) return {is: 15};
        // Visa, Mastercard
        if ((/^(4|5[1-5]).*$/).test(value)) return {is: 16};
      }
      // Unknown card, don't validate length
      return false;
    }
  },
  creditCardZip: function(value, attributes, attributeName, options, constraints) {
    if (!(/^(34|37).*$/).test(attributes.creditCardNumber)) return null;
    return {
      presence: {message: "is required when using AMEX"},
      length: {is: 5}
    };
  }
};

Puis utilisé comme tel: 

validate({creditCardNumber: "4"}, constraints);
// => {"creditCardNumber": ["Credit card number is the wrong length (should be 16 characters)"]}

validate({creditCardNumber: "9999999999999999"}, constraints);
// => {"creditCardNumber": ["9999999999999999 is not a valid credit card number"]}

validate({creditCardNumber: "4242424242424242"}, constraints);
// => undefined

validate({creditCardNumber: "340000000000000"}, constraints);
// => {"creditCardZip": ["Credit card Zip is required when using AMEX"]}

Vous pouvez également rattacher ces fonctions validate () à votre composant avec quelque chose du type @blur=validate(...).

2
K3TH3R

Actuellement, il n'y a pas beaucoup de choix. Jetez un coup d'œil à vue-awesome où vous pouvez trouver les bibliothèques les plus pertinentes. Il y en a 2 pour le moment.

1
ragnar

Si vous utilisez semantic-ui ou si c'est une option pour vous, ils ont un plugin de validation de formulaire incroyable.

sémantique-forme-ui-validation

Je l'ai utilisé avec Vuejs et cela fonctionne très bien.

1
rdk1992

J'ai trouvé ce validateur simple, flexible et bien documenté. Il couvre la plupart des scénarios de validation des formulaires dans Vue Js.

J'ai utilisé le plugin Jquery validator dans le passé. Par rapport à cela, ce validateur simple-vue se distingue par sa flexibilité et sa capacité à valider des formulaires codés en dur et générés dynamiquement.

https://github.com/semisleep/simple-vue-validator

Je l'ai beaucoup utilisé pour mon projet SaaS et, jusqu'à présent, il s'est très bien déroulé.

0
gogo52cn