it-swarm.com.de

Vuejs 2 + Formularprüfung

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

UPDATE Ich habe dieses tolle Plugin gefunden Vee Validate

17
Tiago Matos

Meines Erachtens ist die Implementierung von Front-End-Validierung für VueJS die Verwendung von vuelidate .

Es ist sehr einfach zu bedienen und leistungsstark. Es bietet modellbasierte Validierung. Dies bedeutet, dass das, was Sie in den validierten Daten definieren, vollständig von den Vorlagen entkoppelt ist. Es wird mit gängigen integrierten Validatoren für E-Mail, Mindest- und Höchstlänge oder erforderlich geliefert. Und viele andere.

3
jpeg

Da es sich letztlich um Javascript handelt, können Sie auch einige der vorhandenen Javascript-Validierungsbibliotheken wie Parsely.js oder Validate.js verwenden, um dies zu aktivieren. Das Schöne an der Validate.js-Bibliothek ist, dass das Format leicht im globalen Speicher gespeichert werden kann, 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önnen diese validate () - Funktionen auch mit etwas in der Richtung von @blur=validate(...) an Ihre Komponente anhängen.

2
K3TH3R

Derzeit gibt es nicht viele Möglichkeiten. Werfen Sie einen Blick auf vue-awesome , wo Sie die relevantesten Bibliotheken finden. Zur Zeit sind es 2.

1
ragnar

Wenn Sie Semantic-Ui oder eine Option für Sie verwenden, verfügen Sie über ein erstaunliches Plugin für die Formularüberprüfung.

Semantic-Ui-Form-Validierung

Ich habe es mit Vuejs benutzt und es funktioniert super.

1
rdk1992

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

Ich habe in der Vergangenheit das Jquery-Validator-Plugin verwendet. Im Vergleich dazu zeichnet sich dieser einfache Validator durch seine Flexibilität und seine Fähigkeit aus, sowohl hart codierte als auch dynamisch generierte Formulare zu validieren.

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

Ich habe es für mein SaaS - Projekt ausgiebig verwendet und bisher ist es wirklich gut gegangen.

0
gogo52cn