Vuejs 2 + Formvalidierung

Question

Da Vue-Validator https://github.com/vuejs/vue-validator für Vuejs 2 bereit ist, was ist der beste Weg, Frontend-Validierung zu implementieren?

UPDATE Ich habe dieses tolle Plugin Vee Validate

Answer 1

Eigentlich habe ich dieses ehrfürchtige Plugin Vee Validate gefunden

Answer 2

Momentan gibt es nicht viele Möglichkeiten gefunden. Werfen Sie einen Blick auf vue-awesome, wo Sie die relevantesten Bibliotheken finden können. Es gibt 2 im Moment.

Answer 3

Wenn Sie Semantic-Ui oder eine Option für Sie verwenden, haben sie ein erstaunliches Formvalidierung-Plugin.

semantic-ui-form-validation

ich es mit Vuejs benutzt habe und es funktioniert super.

Answer 4

Da es alles letztlich Javascript ist, könnten Sie auch einige der vorhandenen Javascript-Validierungsbibliotheken wie Parsely.js oder Validate.js verwenden, um dies zu erreichen. Eine Sache, die über die Validate.js Bibliothek ist schön ist, dass es leicht Format im globalen Speicher gespeichert werden könnten, wenn Sie Vuex verwenden:

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} 
    }; 
    } 
}; 

Dann als solche verwendet:

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"]} 

Sie könnten haken Sie auch diese validate() Funktionen an Ihre Komponente mit etwas entlang der Linien von @blur=validate(...)

Answer 5

Ich fand diesen Validator einfach, flexibel und gut dokumentiert. Es deckt die meisten Szenarien der Validierung von Formularen in Vue Js ab.

Ich verwendete Jquery Validator Plugin in der Vergangenheit. Im Vergleich dazu besticht dieser Simple-Vue-Validator durch seine Flexibilität und seine Fähigkeit, sowohl fest codierte als auch dynamisch generierte Formulare zu validieren.

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

Ich benutzen es in großem Umfang für mein SaaS-Projekt und so weit es hat wirklich gut gegangen.

Answer 6

ich vue-form versucht haben und fand es sehr userful